jquery animate方法实现缓存效果详解

来源:互联网 时间:1970-01-01

animate方法在jquery中的作用就是动态的一些效果,animate() 方法执行 CSS 属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果

animate() 方法

改变 "div" 元素的高度:

 代码如下 复制代码

$(".btn1").click(function(){

  $("#box").animate({height:"300px"});

});

完整实例

 代码如下 复制代码

<html>

<head>

<script type="text/javascript" src="/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function()

  {

  $(".btn1").click(function(){

    $("#box").animate({height:"300px"});

  });

  $(".btn2").click(function(){    $("#box").animate({height:"100px"});
  });
});
</script>
</head>
<body>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;">
</div>
<button class="btn1">Animate</button>
<button class="btn2">Reset</button>
</body>
</html>


一个实例(动画函数和动画队列)

 代码如下 复制代码

CSS部分:

<style type="text/css">

*{margin:0;padding:0;}

ul li{ list-style:none;}

img {border:0 none;}

body { padding:100px;}

input[name='show']{ position:fixed;right:50%; top:50px;}

input[name='hide']{ position:fixed;right:40%; top:50px;}

div.test{ width:100px;position:relative;border:1px blue solid;}

</style>

HTML部分:

<input name="show" type="button" value="点击测试"/>

<div>内容填充内容填</div>

jQuery部分:

<script type="text/javascript">

$(function(){

$('div.test').css("opacity","0.5");

$('input').focus()

.click(function(){

$('div.test').animate({left:'400px',height:'100px'},200)

.animate({top:'200px',},200)

.animate({left:0},200)

.animate({top:0},{duration:200,step:cb,queue:true})//将queue值改为false,可使该动画不加入动画队列,即该动画不按默认的先后顺序执行; step为动画函数的callback函数

})

function cb(){

$(this).css({

border:'2px red solid',

opacity:1

})

} })

</script>

这种效果就很牛了,如果使用js不兼容不说还很麻烦,有了它缓存效果一二三就搞定。




相关阅读:
Top