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

JQuery

1个成员

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

发表于 2017-02-10 • 3050 次查看

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部分：

*{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部分：

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

jQuery部分：

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

只看楼主回复倒序查看回复

发表回复

你还没有登录，请先登录或注册！

(大小不能超过2MB，文件类型支持png ,jpg ,gif ,doc ,xls ,txt ,rar ,zip .)

文件名	描述	学币	操作

话题作者

信者

头衔:无

活跃成员

sunny

JQuery

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

课程推荐

PHP 程序开发

VB 程序设计

JAVA 程序设计

创业人生

道德经的奥秘

王阳明心学 (浙大公开课)

推荐资讯