JQuery动画效果

frankcqy_coding

于 2018-08-08 16:21:06 发布

阅读量1.3k

点赞数 1

文章标签： JavaScript JQuery 动画

本文链接：https://blog.csdn.net/Franklin7B/article/details/81509498

版权

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

语法：

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

selector，选择器选择元素；

params 参数定义形成动画的 CSS 属性；

可选的 speed 参数规定效果的时长，取值："slow"、"fast" 或毫秒；

可选的 callback 参数是动画完成后所执行的函数名称。

1.animate（）操作多个属性的值变化：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <script type="text/javascript" src="http://labfile.oss.aliyuncs.com/jquery/2.1.3/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left:'250px',
      height:'+=150px',
      width:'+=150px'
    });
  });
});
</script> 
</head>
 
<body>
<button>开始</button>
<p>一般将元素的 position 属性设置为 relative, fixed, 或 absolute</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>

效果演示：

2.animate（）使用队列功能

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
 <script type="text/javascript" src="http://labfile.oss.aliyuncs.com/jquery/2.1.3/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    var div=$("div");
    div.animate({height:'300px',opacity:'0.5'},"slow");
    div.animate({width:'300px',opacity:'0.7'},"slow");
    div.animate({height:'100px',opacity:'0.5'},"slow");
    div.animate({width:'100px',opacity:'0.7'},"slow");
  });
});
</script> 
</head>
 
<body>
<button>开始</button>
<p>一般将元素的 position 属性设置为 relative, fixed, 或 absolute</p>
<div style="background:#999999;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>

效果演示：