jQuery пошаговая анимация

Question

Я хочу, чтобы три элемента постепенно исчезали один за другим.

<span class="a">Step 1</span>
<span class="b">Step 2</span>
<span class="c">Step 3</span>

Вот моя попытка JS с when() и done() (см. Также http://jsfiddle.net/wU9Qf/):

var step1 = $(".a").fadeIn(3000);
var step2 = function(){$(".b").fadeIn(3000);};
var step3 = function(){$(".c").fadeIn(3000);};

$.when(step1).done(step2);

Я хочу fadeIn() шаг за шагом (шаг 1> шаг 2> шаг 3) - как мне это сделать?

Answer 1

это то, что вы спрашивали?

$(".a").fadeIn(3000,function(){
    $(".b").fadeIn(3000, function(){
        $(".c").fadeIn(3000);
    });
});

Answer 2

Другой вариант, если вы используете jQuery 1.6, это использовать новый синтаксис, который позволяет вам использовать отложенное поведение для анимации. Например:

$.when($('#foo').animate({
    top: 100,
    left: 100
}, 3000)).pipe(function() {
    return this.animate({
        top: 0,
        left: 0
    }, 3000);
}).then(function() {
    console.log('done');
});

Этот код анимирует #foo, затем, когда эта анимация завершена, начинается следующая. Когда тот завершен, он записывает «сделано» на консоль. Если у вас есть много анимаций, это может быть чище, чем делать несколько вложенных обратных вызовов.

Answer 3

$('span').each(function(i, el){
  setTimeout(function(){
    $(el).fadeIn();
  },100*i);
});

Использование setTimeout как это внутри $.each позволяет вам анимировать любое количество элементов в порядке. Настройте 100*i, чтобы увеличить / уменьшить продолжительность анимации, и установите $(el).fadeIn(); для любого типа анимации, очевидно,

Answer 4

если у вас есть родительский элемент, вы также можете применить следующий метод.Функция each () используется для обхода каждого элемента целевого объекта jQuery.

 <div id="parent_div">
                            <p class="none at_font"><i class="fa fa-hand-o-right"></i> Web Design And Development</p>
                            <p class="none at_font"><i class="fa fa-hand-o-right"></i> Android Development</p>
                            <p class="none at_font"><i class="fa fa-hand-o-right"></i> iFone Development</p>
                            <p class="none at_font"><i class="fa fa-hand-o-right"></i> Wordpress Development</p>
                            <p class="none at_font"><i class="fa fa-hand-o-right"></i> Website Clone</p>
                        </div>

           <button class="btn btn-default" id="at_explorer">Explorer</button>

           <script>
                $("#at_explorer").click(function () {
                       $("#parent_div").children().each(function (index) {
                            $(this).delay(500 * index).fadeIn(300);
                        });
                    });
                </script>

Этот блог содержит все эффекты затухания Примеры http://www.alphansotech.com/blogs/jquery-fadein-fadeout-examples/