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

为了满足动画实现的灵活性，解决单个方法实现动画的单一性，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动画有什么区别？ ?

jQuery动画的显示与隐藏效果

黑马程序员web前端培训课程