Анимируйте элементы последовательно, используя CSS3 и jQuery - PullRequest
Новая
       15

Анимируйте элементы последовательно, используя CSS3 и jQuery

2 голосов
/ 19 июня 2011

Я новичок в jQuery (и CSS3 и во всем остальном), и мне интересно, как автоматически анимировать три разных элемента (в данном случае изображения), чтобы они появлялись один за другим в последовательности - #1, # 2, # 3 - при загрузке страницы.Вот мой CSS: 

img#element3 {
    position:absolute;
    opacity:0;
    top:25px;
}

img#element2 {
    position:absolute;
    opacity:0;
    top:270px;
    left:60px;
    margin:10px 0;
}

img#element1 {
    position:absolute;
    opacity:0;
    top:328px;
    left:70px;
    margin:10px 0;
}

Для jQuery я попытался изменить решение в этом посте , но оно не работает.Вот что я сделал для jQuery: 

$(document).ready(handler)
    $("#element3").animate({opacity: "1"}, "slow", function() {
    $("#element2").animate({opacity: "1"}, "slow", function() {
    $("element1").animate({opacity: "1"}, "slow", function() {
    });
});
});

Есть ли способ сделать это, используя только CSS3-анимацию или переходы?Если нет, то как правильно сделать это с помощью jQuery, и как вы указываете заказы и задержки для этого?

Ответы [ 3 ]

3 голосов
/ 19 июня 2011

Вы не можете сделать поэтапную анимацию только с помощью CSS.

В вашем коде много синтаксических проблем. Вы можете обратиться к консоли ошибок или использовать инструмент, такой как JSLint .

Я бы, наверное, использовал ... 

$(document).ready(function() {
    $("#element3").fadeIn('slow', function() {
        $("#element2").fadeIn('slow', function() {
            $("#element1").fadeIn('slow');
        });
    });
});

jsFiddle .

2 голосов
/ 19 июня 2011

Немного чище, если вы используете класс, или множественный селектор с .each(): 

$(document).ready(function() {
    $("#element3,#element2,#element1").each(function(i) {
        $(this).delay(600*i).animate({opacity: "1"}, "slow");
    });
});

... или если заказ обратный: 

$(document).ready(function() {
    $( $("#element3,#element2,#element1").get().reverse() ).each(function(i) {
        $(this).delay(600*i).animate({opacity: "1"}, "slow");
    });
});
1 голос
/ 19 июня 2011

Это вполне возможно с анимацией css3, в отличие от отмеченных ответов:

Чтобы построить на его решениях:

используйте keyframes и animation-delay для запуска анимации одна за другой. 

@keyframes 'fadein' {
    from { opacity: 0; }
    to { opacity: 1; }
}

просто увеличьте animation-delay на каждом элементе, чтобы он равнялся сумме значений предыдущих элементов animation-duration.

и, конечно, обязательно используйте modernizr с отступлением от js!

вот полное решение для webkit;применять другие браузерные префиксы по мере необходимости.

...