首页技术文章正文

animate()方法创建自定义动画

更新时间:2021年08月13日16时37分来源:传智教育浏览次数:

为了满足动画实现的灵活性，解决单个方法实现动画的单一性，jQvery中提供了animate() 方法让用户可以自定义动画。语法如下所示。

$ (selector).animate (params[, speed][, easing][, fn])

上述语法中，params表示想要更改的样式，以对象形式传递，样式名可以不用带引号，旧如果样式名中有“-”( 如 border-left )，需要用驼峰命名法(如borderLeft)。其余参数的含义与前面讲过的动画方法相同，不再赘述。

下面我们通过代码演示如何利用animate()方法创建自定义动画。

<style>

div { width: 50px; height: 50px; background-color: P:pink;position:absolute; 
</style>

<button>动起来</button>

<div></div>

<script>

$ ("button") . click(function(){

$("div") .animate({ left: 500， top: 300, opacity: .4, width: 500 },500);

   };

 </script>

上述代码中，第4行代码定义按钮。第5行代码定义div元素。第7 ~ 9行代码给页面中的“动起来” 按钮绑定单击事件，当单击鼠标时通过第8行代码将div元素运动到距离人侧50x、距离顶部30px的位置，透明度为0.4,宽度为500px。

猜你喜欢：

CSS动画和JS动画缺点和优点分别是什么?

什么是动画队列？怎样停止动画队列效果？

Javascript创建对象的方式有哪些？

传智教育web前端开发培训课程

上一篇：JavaScript中创建Date对象有几种方法？ 下一篇：什么是CSS浮动?有什么作用？