動畫回撥函式

榴蓮餅發表於2017-03-28
動畫函式

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>



相關文章