jQuery animate() 方法用于创建自定义动画。

语法：

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

 params 参数是必须存在的，它定义形成动画的 CSS 属性。

一下代码是简单的animate()函数的应用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){//加载完成时
  $("button").click(function(){//鼠标点击事件
    $("div").animate({//动画
      left:\'250px\',//距离左边250像素点
      opacity:\'0.5\',//透明度为0.5
      height:\'150px\',//设置大小
      width:\'150px\'
    });
  });
});
</script> 
</head>
 
<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

运行结果截图：

形成了简单的动画效果

注意：默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left:\'250px\',
      height:\'+=150px\',//在当前基础上高度加上150像素点
      width:\'+=150px\'

这个执行一次后，会在每一次执行后的基础上变大。或变小。

可以把属性的动画值设置为 "show"、显示"hide"隐藏 或 "toggle"切换：
$("button").click(function(){
  $("div").animate({
    height:\'toggle\'
  });
}); 
$("button").click(function(){
  var div=$("div");
  div.animate({height:\'300px\',opacity:\'0.4\'},"slow");
  div.animate({width:\'300px\',opacity:\'0.8\'},"slow");
  div.animate({height:\'100px\',opacity:\'0.4\'},"slow");
  div.animate({width:\'100px\',opacity:\'0.8\'},"slow");
});

编写多个 animate() 调用，jQuery 会创建包含这些方法调用的”内部”队列。然后逐一运行这些 animate 调用。

这些代码逐个实现。

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