使用Jquery动画分割一个人

Question

我尝试动画多个div,淡入,一个接一个地在页面加载时按顺序.当我点击进入另一个页面时,我也希望反向按顺序淡出.我如何在jquery中设置它？

Answer 1

很难给你一个例子,因为有很多方法可以在jQuery中制作动画,但这是一个简单的例子.动画两个<div>s,一个接一个(在页面加载时):

请参阅此处的工作示例: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
• 加载页面时,<div>with id animation-one将在不透明度0到不透明度1的700毫秒内进行动画处理.
• 在animation-one动画完成后,另一个<div>(带有id animation-two)的动画以类似的方式启动.

现在,淡出<div>s是类似的.我假设您的链接只是指向另一个页面,所以我暂停了该链接的以下内容,直到动画结束:

这假设你有一个<a>id为的链接next-page,但实际上它可以是任何选择器:

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>一次动画多个s:http://jsfiddle.net/andrewwhitaker/n3GEB/.这会将常用代码移动到函数中,并希望使示例更易于阅读.