用jQuery实现自定义动画

最新推荐文章于 2021-04-02 21:11:19 发布

kevin_vv

最新推荐文章于 2021-04-02 21:11:19 发布

阅读量738

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/u013758116/article/details/35553141

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在jQuery中已经有封装好的自定义动画的函数，即animate() 方法。

语法：$(selector).animate({params},speed,callback);

         必需的 params 参数定义形成动画的 CSS 属性。这是一个字典数组。
         可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
         可选的 callback 参数是动画完成后所执行的函数名称。

举例：实现图片的移动，移动完成后弹出完成操作


<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){

 $("#myman").animate(  
  {  
   top:'100px',  
   left:'100px',},
   3000,
   function(){alert("完成") }
   ); 
});
</script>



"


（2）链式编程

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
  $("#myman").click(function(){
      $(this).animate({
      width:"200px",
      },
      2000
      ).animate(
      {
      width:'150px',},
      2000,
      function(){alert("变形结束");}
      );
  })
});
</script>