jQuery的动画效果

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>

运行结果截图：

jQuery的动画效果

形成了简单的动画效果

注意：默认情况下，所有 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 调用。

这些代码逐个实现。

相关推荐