js jquery css html 动画效果

最新推荐文章于 2022-08-29 16:36:10 发布

转载最新推荐文章于 2022-08-29 16:36:10 发布 · 146 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/2351011/blog/1827971

本文通过一个具体的实例展示了如何使用jQuery库来控制网页元素的动画效果。主要包括：启动动画、停止动画以及停止动画后复原元素状态的方法。这些操作都是通过绑定按钮点击事件实现的。

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script src="js/jquery.min.js"></script>
   </head>
   <body>
       <button id="go">Go</button> <button id="stop2">STOP!</button><button id="stop">STOP!</button>
       <div style="border: 1px solid red;" class="block"></div>
   </body>
   <script>
       // 开始动画
       $("#go").click(function(){
       $(".block").animate({height:210}, 5000);
       });

       // 当点击按钮后停止动画
       $("#stop2").click(function(){
       $(".block").stop();
       });

       // 当点击按钮后停止动画,并复原
       $("#stop").click(function(){
       $(".block").stop().animate({ height: "0" },0);
       });
   </script>
</html>