jq 自定义动画animate

最新推荐文章于 2022-04-02 21:42:46 发布

漂亮有内涵的大妹子

最新推荐文章于 2022-04-02 21:42:46 发布

阅读量525

点赞数

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/lujiayingwing/article/details/78345941

这篇博客介绍了如何使用jQuery的animate方法创建自定义动画效果。通过示例展示了当鼠标悬停在两个不同元素上时，如何改变元素的宽高、位置，并运用缓动函数和回调函数实现复杂的动画序列。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击打开链接

<style>
           .box1{
               width: 200px;
               height: 200px;
               background: deeppink;
           }
           .box2{
               width: 200px;
               height: 200px;
               background: chartreuse;
               position: absolute;
               left: 0;
               top: 0;
           }
       </style>
   </head>
   <body>
       <div class="box1"></div>
       <div class="box2"></div>
   </body>
   <script src="js/js/jquery-1.12.4.min.js"></script>
   <script src="js/js/jquery.easing.1.3.js"></script>
   <script >
       $('.box1').on('mouseover',function(){
           $(this).animate({width:400,height:400},'slow','easeInOutBack',function()
           {
           console.log('我是回调函数');
       });
       });

       $('.box2').on('mouseover',function(){
           $(this).animate({left:500},'slow',function(){
               $(this).animate({top:500},'slow',function(){
                   $(this).animate({left:0},20000,function(){
                       $(this).animate({top:0},'slow');
                   });
               });
           });
       });
   </script>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。