用Jquery在一个接一个的动画Divs [英] Animate Divs One Right After the Other with Jquery

问题描述

我正在尝试为多个div设置动画，并在页面加载时依次一个接一个地渐弱.当我单击转到另一页时，我也想反向执行，依次淡出.我该如何在jquery中进行设置?

解决方案

由于很难在jQuery中进行动画处理，因此很难举一个例子，但这是一个简单的示例.动画两个<div>，一个接一个(在页面加载时):

在此处查看工作示例: http://jsfiddle.net/andrewwhitaker/p7MJv/

HTML:

<div id="animation-one">Hello!</div>
<div id="animation-two">Jquery Animate!</div>

CSS:

#animation-one,
#animation-two
{
    opacity:0;
    top: 30px;
    width: 400px;
    height: 100px;
    background-color:#00CCCC;
    font-size:35pt;
    position:absolute;
}

#animation-one
{
    background-color:#CCCC33;
    top:130px;
}

JavaScript:

$("#animation-one").animate({
    opacity:1.0}, 700,
    function() {
        // Callback function: This is called when 'animation-one'
        // is finished.
        $("#animation-two").animate({
            opacity: 1.0
        }, 700);
    }
);

正在发生的事情:

• 页面上有两个<div>，带有CSS opacity: 0
• 加载页面后，ID为animation-one的<div>在从不透明度0到不透明度1的700毫秒内进行动画处理.
• animation-one动画结束后，另一个<div>(ID为animation-two)也以类似的方式启动了动画.

---

现在，使<div>淡出是相似的.我假设您的链接仅指向另一个页面，所以我暂停了该链接的以下内容，直到动画完成为止:

这假设您具有ID为next-page的链接<a>，但实际上它可以是任何选择器:

HTML:

<a id="next-page" href="http://www.google.com">Google</a>

JavaScript:

$("#next-page").click(function($event) {
    $event.preventDefault();
    var href = $(this).attr("href");

    $("#animation-two").animate({
        opacity: 0}, 700,
        function() {
            // Callback function:  This is called when 'animation-two'
            // is finished.
            $("#animation-one").animate({
                opacity: 0}, 700,
                function() {
                    // Direct the user to the link's intended
                    // target.
                    window.location = href;
                });
    })
});

正在发生的事情:

• 单击ID为next-page的链接时，会发生与上述类似的动画序列，但是相反.
• 最后一个动画出现后，链接将正确跟随.

我认为在上面的链接中查看示例应该会有所帮助.另外，请确保并检查动画的文档.

希望有帮助！

编辑:由于OP希望一次为多个<div>设置动画，因此添加了另一个示例的链接: http://jsfiddle.net/andrewwhitaker/n3GEB/.这样可以将通用代码移入函数中，并希望使示例更易于阅读.

Im trying to animate multiple divs, fading in, one right after the other in sequence when the page loads. I also want to do it in reverse, fading out in sequence, when i click to go to another page. How do i go about setting this up in jquery?

解决方案

Kind of hard to give you an example since there are so many ways to animate in jQuery, but here's a simple example. Animating two <div>s, one after the other (on page load):

See working example here: http://jsfiddle.net/andrewwhitaker/p7MJv/

HTML:

<div id="animation-one">Hello!</div>
<div id="animation-two">Jquery Animate!</div>

CSS:

#animation-one,
#animation-two
{
    opacity:0;
    top: 30px;
    width: 400px;
    height: 100px;
    background-color:#00CCCC;
    font-size:35pt;
    position:absolute;
}

#animation-one
{
    background-color:#CCCC33;
    top:130px;
}

JavaScript:

$("#animation-one").animate({
    opacity:1.0}, 700,
    function() {
        // Callback function: This is called when 'animation-one'
        // is finished.
        $("#animation-two").animate({
            opacity: 1.0
        }, 700);
    }
);

Here's what's happening:

• Two <div>s are on the page with CSS opacity: 0
• When the page is loaded, the <div> with id animation-one is animated over a period of 700 milliseconds from opacity 0 to opacity 1.
• After the animation-ones animation has finished, another <div> (with id animation-two) has an animation kicked off in a similar fashion.

---

Now, fading out the <div>s is similar. I've assumed that your link just directs to another page, so I've suspended the following of that link until the animation is finished:

This assumes you have a link <a> with an id of next-page, but really it can be any selector:

HTML:

<a id="next-page" href="http://www.google.com">Google</a>

JavaScript:

$("#next-page").click(function($event) {
    $event.preventDefault();
    var href = $(this).attr("href");

    $("#animation-two").animate({
        opacity: 0}, 700,
        function() {
            // Callback function:  This is called when 'animation-two'
            // is finished.
            $("#animation-one").animate({
                opacity: 0}, 700,
                function() {
                    // Direct the user to the link's intended
                    // target.
                    window.location = href;
                });
    })
});

Here's what's happening:

• When the link with id next-page is clicked, a similar animation sequence as described above occurs, but in reverse.
• After the last animation occurs, the link is followed properly.

I think seeing the example in the link above should help. Also, make sure and check out the docs for animate.

Hope that helps!

Edit: Adding a link to another example since the OP wants to animate multiple <div>s at once: http://jsfiddle.net/andrewwhitaker/n3GEB/. This moves common code into functions and hopefully makes the example easier to read.

这篇关于用Jquery在一个接一个的动画Divs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！