教育行业A股IPO第一股(股票代码 003032)

全国咨询/投诉热线:400-618-4000

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

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

好口碑IT培训

为了满足动画实现的灵活性,解决单个方法实现动画的单一性,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前端开发培训课程

0 分享到:
和我们在线交谈!