动画顺序使用CSS3和jQuery元素 [英] Animate elements sequentially using CSS3 and jQuery

问题描述

我是一个初学者的jQuery（和CSS3和一切为此事），我想知道如何自动制作三个不同的内容（图片，在这种情况下），让他们在一个序列后，其他依次出现 - ＃ 1，＃2，＃3 - 页面加载时。这里是我的CSS：

I'm a beginner to jQuery (and CSS3 and everything else for that matter) and am wondering how to automatically animate three different elements (images, in this case) so that they appear one after the other in a sequence - #1, #2, #3 - when the page loads. Here's my 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的，我试图修改<一个解决方案href=\"http://stackoverflow.com/questions/1218152/how-can-i-animate-multiple-elements-sequentially-using-jquery\">this帖子但它不工作。下面是我做了jQuery的：

For the jQuery, I tried to modify the solution in this post but it's not working. Here's what I did for jQuery:

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

有没有办法做到这一点只使用CSS3动画或过渡？如果不是，什么是正确的方法这样做使用jQuery，你怎么指定订单和推迟这样做呢？

Is there a way to do this using just CSS3 animations or transitions? If not, what's the proper way to do so using jQuery, and how do you specify orders and delays to do so?

推荐答案

您不能做的动画上演单独CSS。

You could not do the staged animation with CSS alone.

您code有很多语法问题。您可以咨询你的错误控制台或使用工具，如 JSLint的。

Your code has a lot of syntax problems. You can consult your error console or use a tool such as JSLint.

我可能会使用...

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

的jsfiddle 。

这篇关于动画顺序使用CSS3和jQuery元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！