Jquery动画执行顺序测试

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>测试动画顺序</title>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen"title="no title" charset="utf-8">
    <script src="jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="js.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <div id="wrap">
        <div id="box1"></div>
        <div id="box2"></div>
    </div>
    <input type="button" value="Click me" id="button">
</body>
</html>

CSS代码如图

#wrap{
    height:500px;
    width:500px;
    border:1px solid blue;
    position:relative;
}
#box1{
    height:200px;
    width:200px;
    background:red;
    position:absolute;
}
#box2{
    height:200px;
    width:200px;
    background:green;
    position:absolute;
    top:200px;
}

初试的js代码：

$(function(){
    $('#button').click(function(){
        $('#box1').animate({left:"200px"},3000)
                  .animate({top:"200px"},2000)
                  .fadeOut(1000);
    })
})

顺序执行，向左移动200px，向下200px，消失

$(function(){
    $('#button').click(function(){
        $('#box1').animate({left:"200px"},3000)
                  .animate({top:"200px"},2000)
                  .css("border","5px solid yellow");
    })
})

.css不在动画队列中，率先立即执行

$(function(){
    $('#button').click(function(){
        $('#box1').animate({left:"200px"},3000)
                  .animate({top:"200px"},2000,function(){
                    $(this).css("border","5px solid yellow");
                  })
 
    })
})

css加入到动画队列中，在前两个动作执行完后执行。

$(function(){
    $('#button').click(function(){
        $('#box1').animate({left:"200px"},3000)
                  .animate({top:"200px"},2000,showBorder);
        function showBorder(){
                $('#box1').css("border","5px solid yellow");
              }
    })
})

顺序执行，注意showBorder的调用没有括号。

$(function(){
    $('#button').click(function(){
        $('#box1').animate({left:"200px"},3000)
                  .animate({top:"200px"},2000,showBorder());
        function showBorder(){
                $('#box1').css("border","5px solid yellow");
              }
    })
})

加上括号后，showBorder（）会立刻执行。showBorder和showBoreder()是不同的。showBoreder()也会脱离动画队列立刻执行。

$(function(){
    $('#button').click(function(){
        $('#box1').animate({left:"200px"},3000)
                  .animate({top:"200px"},2000,showBorder())
                  .css("background","pink")
 
        function showBorder(){
                $('#box1').css("border","5px solid yellow");
              }
    })
})

如上代码，showBorder()和.css(“background”,”pink”)会立刻执行。然后动画执行。

posted @ 2012-06-30 17:55 脉凌网络阅读(1019) 评论(3) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

脉凌网络

Jquery动画执行顺序测试

公告