jquery动画

最新推荐文章于 2019-11-04 14:26:07 发布

原创最新推荐文章于 2019-11-04 14:26:07 发布 · 243 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #动画 #callback

jquery 专栏收录该内容

1 篇文章

订阅专栏

jQuery animate() 方法允许您创建自定义的动画。

语法：

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

注意：

必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。

提示：

默认地，所有 HTML 元素都有一个静态位置，且无法移动。

如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

实例1：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left:'250px'});
  });
});
</script> 
</head>
 
<body>
<button>开始动画</button>
<div style="background:gold;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>

实例2：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left:'250px',
      opacity:'0.5',
      height:'150px',
      width:'150px'
    });
  });
});
</script> 
</head>
 
<body>

<button>开始动画</button>
<div style="background:gold;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>

实例3：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    var div=$("div");  
    div.animate({left:'100px'},"slow");
    div.animate({fontSize:'3em'},"slow");
  });
});
</script> 
</head>

<body>

<button>开始动画</button>
<div style="background:gold;height:100px;width:200px;position:absolute;">HELLO</div>

</body>
</html>

当然你也可以使用callback函数,

Callback 函数在当前动画 100% 完成之后执行，比如说动画结束后弹出一个警告框：

<html>
<head>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("div").animate({
      left:'0px',
      opacity:'0.5',
      height:'700px',
      width:'1336px',
   fontSize:'36em'
    },1000,function(){

  alert("animation end");
  
  var div=$("div");
 div.animate({left:'10px',height:'100px',width:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");

    });
  });
});
</script>
</head>

<body>
<button type="button">click me</button>
<div style="color:red;background:gold;height:100px;width:100px;position:absolute;">shit</div>
</body>
</html>