Js停止动画

来自CloudWiki
跳转至： 导航， 搜索

<!DOCTYPE html> <html> <head> 

   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>停止动画</title>
   <link rel="stylesheet" href="">
   <style>
       .box{
           width:400px;
           height:400px;
           background:red;
           margin-top:20px;
       }
       button{
           font-size:30px;
       }
   </style>
   <script src="js/jquery.min.js"></script>
   <script>
       $(function(){
           $(".box").animate({
               "width":"+=400px"
           }, 2000)
           $(".box").animate({
               "height":"+=200px"
           }, 2000)
           $(".box").animate({
               "opacity":"0.2"
           }, 2000)

           $(".btn").click(function(){
               $(".box").stop();//停止当前动画，后续继续执行
           });

           $(".btn1").click(function(){
               $(".box").stop(true);//停止当前动画及后续动画
           })

           $(".btn2").click(function(){
               $(".box").stop(true,true);//停止当前执行的动画并且跳转到当前动画的最终状态，后续不执行
           })
       })
   </script>

</head> <body> <button class="btn">stop()</button> <button class="btn1">stop(true)</button> <button class="btn2">stop(true,true)</button>

</body> </html>

取自“http://www.openbrains.net/mediawiki/index.php?title=Js停止动画&oldid=15352”