Помогите с пошаговым показом элементов svg по клику

[jon4god]

Нужно для одного проекта сделать следующее, и проще всего (я так думаю) это сделать через js. Сначала забрел в span.svg, но это для меня еще сложнее.
При нажатии, допустим пробела или кнопки с идентификатором id="button", показывалась следующая часть svg рисунка, предварительно скрытая через display:none. В рисунке каждая часть имеет идентификатор id="stepN", где N-номер шага.
Для гуру дело 5 минут, а мне или чумащедше гуглить, продираясь через кучу кода или учить js. Дело полезное, но сейчас времени нет(
Может кто помочь? Или ткните куда и на что смотреть.

 

[Q_BASIC]

for(i=9;i<10;i++)
setTimeout(function(){$('.allimg').hide();$('.img_'+i).show();}, i*100);

 

[jon4god]

Высший пилотаж и ... непонятно.
Я так понял - есть цикл и временная функция которая сначала прячет все с классом .allimg и показывает с классом .img_N, где N-переменная цикла. Верно?
Но не пойму как это с моей задачей связано(
Я пока пробую так:
в css [id^=step] {visibility: hidden;} - прячу все что содержит идентификатор "step"
Потом добавляю кнопку:
<input type="button" value="Show next" onclick="shownext();">
и js функцию:
var n = 1;
function shownext() {
var svgElement = document.getElementById( "step" + n + "" );
svgElement.setAttribute("visibility", "visible");
var n = n + 1;
}
Но не работает. Логически вроде должно, а по факту нет.

 

[Absolute]

Я пока пробую так:
в css [id^=step] {visibility: hidden;} - прячу все что содержит идентификатор "step"
Потом добавляю кнопку:
<input type="button" value="Show next" onclick="shownext();">
и js функцию:
var n = 1;
function shownext() {
var svgElement = document.getElementById( "step" + n + "" );
svgElement.setAttribute("visibility", "visible");
var n = n + 1;
}
Но не работает. Логически вроде должно, а по факту нет.

такая конструкция не будет увеличивать n на единицу т.к. область видимости при явном объявлении ограничивается пределами текущей функции. Нужно писать без var внутри функции.

 

[jon4god]

Вот такие "мелкие" знания и отличают любителя от эксперта)))
Вот рабочая конструкция:

var n = 1;

    function shownext() {
      document.getElementById( "step" + n ).style.visibility = 'visible';
      if (n<17) n = n + 1;
    }

    function shownprevious() {
      document.getElementById( "step" + n ).style.visibility = 'hidden';
      if (n>1) n = n - 1;
    }

 

[Q_BASIC]

Первое это я по таймеру написал смену, задание до конца не прочитал

Теперь так:

var svg_count = 3;
var svg_frame = 1;

function svg_next()
{
    if(window.svg_frame < window.svg_count)
    {
        window.svg_frame = window.svg_frame + 1;
 
        $('.svg_element').hide();
        $('.svg_element_'+window.svg_frame).show();
    }
}

function svg_prev()
{
    if(window.svg_frame > 1)
    {
        window.svg_frame = window.svg_frame - 1;
 
        $('.svg_element').hide();
        $('.svg_element_'+window.svg_frame).show();
    }
}

Пример HTML:

<img src="/img/frame_1.png" class="svg_element svg_element_1" />
<img src="/img/frame_2.png" class="svg_element svg_element_2" />
<img src="/img/frame_3.png" class="svg_element svg_element_3" />

 

[jon4god]

Спасибо) Если моя конструкция будет создавать проблемы, воспользуюсь вашим вариантом.

 

[Q_BASIC]

Спасибо) Если моя конструкция будет создавать проблемы, воспользуюсь вашим вариантом.

visibility элемент скрывает, а место занимаемое им не освобождает. Поэтому у Вас новый кадр будет показываться не на месте старого, а рядом

Из htmlbook.ru:

Элемент становится невидимым или правильней сказать, полностью прозрачным, поскольку он продолжает участвовать в форматировании страницы.

 

[jon4god]

А мне так и надо) Есть схема в svg в которой место элементов статично, просто они должны появляться пошагово, а для а-ля анимации ваш вариант само то!

 

[m@rks]

Есть схема в svg в которой место элементов статично, просто они должны появляться пошагово

jquery .append() .appendTo() .after() .before()