动画回调函数

最新推荐文章于 2022-08-17 01:11:31 发布

原创最新推荐文章于 2022-08-17 01:11:31 发布 · 592 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #动画回调函数

jQuery中的动画专栏收录该内容

4 篇文章

订阅专栏

1.在最后一步切换元素的css样式,而不是隐藏元素css("border","5px solid blue"),如果将fadeOut("slow")改为css("border","5px solid blue"),不能达到预期效果,但是刚开始执行动画css()方法就被执行了

<style type="text/css">
*{margin:0;padding:0;}	
body { padding: 60px }
#panel {position: relative; width: 100px; height:100px;border: 1px solid #0050D0;background: #96E555; cursor: pointer}
</style>
<script type="text/javascript">
    $(function(){
        $("#panel").css("opacity", "0.5");//设置不透明度
        $("#panel").click(function(){
              $(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)
					 .animate({top: "200px" , width :"200px"}, 3000 )
					 .css("border","5px solid blue");
        });
    });
</script>
</head>
<body>
<div id="panel"></div>
</body>

2.出现这个问题css()方法并不会加入到动画队列中,而是立即执行.可以使用回调函数callback对非动画方法实现排队,把css()方法写到最后一个动画的回到函数里就可以了

<style type="text/css">
*{margin:0;padding:0;}	
body { padding: 60px }
#panel {position: relative; width: 100px; height:100px;border: 1px solid #0050D0;background: #96E555; cursor: pointer}
</style>
<script type="text/javascript">
    $(function(){
        $("#panel").css("opacity", "0.5");//设置不透明度
        $("#panel").click(function(){
              $(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)
					 .animate({top: "200px" , width :"200px"}, 3000 ,function(){
					     $(this).css("border","5px solid blue");
					 })
					 
        });
    });
</script>
</head>
<body>
<div id="panel"></div>
</body>

<style type="text/css">
*{margin:0;padding:0;}	
body { padding: 60px }
#panel {position: relative; width: 100px; height:100px;border: 1px solid #0050D0;background: #96E555; cursor: pointer}
</style>
<script type="text/javascript">
    $(function(){
        $("#panel").css("opacity", "0.5");//设置不透明度
        $("#panel").click(function(){
              $(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)
					 .animate({top: "200px" , width :"200px"}, 3000 )
                     .queue(function(next){
                         $(this).css("border","5px solid blue");
                         next(); //继续下一个动画
                    })
                    .slideUp("slow");
					 
        });
    });
</script>
</head>
<body>
<div id="panel"></div>
</body>