您的位置：首页 > Web前端 > JQuery

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

2013-09-05 20:25 585 查看

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不兼容不说还很麻烦，有了它缓存效果一二三就搞定。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航