首页 / JQUERY / 五、jQuery中的动画
五、jQuery中的动画
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了五、jQuery中的动画，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4215字，纯文字阅读大概需要7分钟。
内容图文
通过jQuery的动画方法，能够轻松地为网页添加非常精彩的视觉效果，给用户一种全新的体验。
一、show()方法和hide()方法
1、show()方法和hide()方法
show()方法和hide()方法是jQuery中最基本的动画方法。在HTML文档里，为一个元素调用hide()方法，会将该元素的display样式改为none。
隐藏元素：
$("element").hide(); //通过hide()方法隐藏元素
也可以通过css方法设置display属性
$("element").css("display","none");//通过css()方法隐藏元素
当吧元素隐藏后，可以使用show()方法将元素的dislay样式设置为先前的显示状态。
$("element").show();
用jQuery做动画效果要求要在标准模式下，否则可能会引起动画抖动。
2、show()方法和hide()方法让元素动起来
show()方法和hide()方法在不带任何参数的情况下，相当于css("display","none/block/inline")。作用是立即隐藏或显示匹配的元素，不会有任何动画。如果希望在调用show(）方法时，元素慢慢的显示出来，可以为show()方法指定一个速度参数，例如，指定一个速度关键字"slow"。
$("element").show("slow");
其他关键字还有:normal fast。还可以为显示速度指定一个数字。
$("element").hide(600);
hide(600)方法会同时减少内容的高度、宽度和不透明度，直至这3个属性的值都为0，最后设置该元素的css规则为display:none.同理，show(600)方法则会从上到下增大内容的高度，从左到右增大内容的宽度，同时增加内容的不透明度，直至元素全部显示出来。
二、fadeIn()方法和fadeOut()方法
与show()方法不相同的是，fadeIn()方法和fadeOut()方法只改变元素的不透明度。fadeOut()方法会在指定的一段时间内降低元素的不透明度，直到元素完全消失(display:none)。fadeIn()方法则相反。
三、slideUp()方法和slidDown()方法
slideUp()方法和slideDown()方法只会改变元素的高低，当调用slideDown()方法时，这个元素将由上至下延伸显示。slideUp()方法正好相反，元素将由下到上缩短隐藏。
四、自定义动画animate()方法
前面已经讲了3种类型的动画。其中show()方法和hide()方法会同时修改元素的多个样式属性，高度、宽度、透明度。fadeOut()、fadeIn()方法只会修改元素的不透明度。slideDown()方法和slideUp()方法只会改变元素的高度。很多情况，这些方法无法满足用户的各种需求，那么就需要对动画有更多的控制，需要采取一些高级的自定义动画来解决这些问题。在jQuety中，可以使用animate()方法来自定义动画。animate(params,speed,callback)。
第一个参数：params 一个包含样式属性及值的映射，比如：{property1:"value1",property2:"value2",....}
第二个参数：speed 速度参数 可选。
callback:在动画完成时执行的函数，可选。
1、自定义简单动画
单击div区域，使得div向左移动：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<style type="text/css">
#panel{position:relative; width:100px; height:100px; border:1px solid #0050D0; background:#96E555; cursor:pointer;}
</style>
<script type="text/javascript" >
$(function(){
$("#panel").click(function(){
$(this).animate({left:"500px"},3000);
});
});
</script>
</head>
<body>
<div id="panel"></div>
</body>
</html>
2、累加累减动画
{left:"500px"}中的500px之前加上“+=”或“-=”符号表示在当前位置累加或者累减。
$(function(){
$("#panel").click(function(){
$("#panel").animate({left:"+=500px"},3000);
});
});
3、多重动画
(1)、同时执行多个动画
例如在元素向右滑动的同时，放大元素的高度。
$(function(){
$("#panel").click(function(){
$(this).animate({left:"500px",height:"200px"},3000);
});
});
(2)、按顺序执行多个动画
上例中，两个动画(left:"500px"和height:"200px")是同时发生的，如果想要按顺序执行动画，例如让<div>元素先向右滑动，然后在放大它的高度，只需把代码拆开，然后按照顺序写就可以了。
$(function(){
$("#panel").click(function(){
$(this).animate({left:"500px"},3000);
$(this).animate({height:"200px"},3000);
});
});
因为animate()方法都是对同一个jQuery对象进行操作，所以也可以改为链式的写法。
4、综合动画
例如，单击<div>元素后让他向右移动的同时增大它的高度，并将它的不透明度从50%变换到100%，然后在让他从上到下移动，同时他的宽度变大，当完成这些效果后，让他以淡出的方式隐藏。
$(function(){
$("#panel").click(function(){
$("#panel").animate({left:"400px",height:"200px",opacity:"1"},3000).animate({top:"200px",width:"200px"},3000).fadeOut("slow");
});
});
5、动画回调函数
如果将上例的fadeOut("slow")改为css("border","5px solid blue")，实际的效果是，刚开始执行动画的时候，css()方法就执行了。出现这个问题的原因是css()方法并不会加入到动画队列中，而是立即执行。可以使用回调函数callback对非动画方法实现排队。只要把css()方法写在最后一个动画的回调函数里即可。
回调函数callback适用于所有的jQuery的动画的效果方法，例如slideDown()方法。
6、停止动画和判断是否处于动画状态
(1)、停止动画：
很多时候需要停止匹配元素正在进行的动画，如果需要在某处停止动画，需要使用stop()方法。stop([clearQueue],[gotoEnd])
参数clearQueue,gotoEnd都是可选的参数，为boolean值。clearQueue代表是否要清空未执行完的动画列表，gotoEnd代表是否直接将正在执行的动画跳转到末状态。如果直接使用stop()方法，则会立即停止当前正在进行的动画，如果接下来还有动画等待继续进行，则以当前状态开始接下来的动画。stop()方法会结束当前正在进行的动画，并立即执行队列中的下一个动画。
(2)、判断元素是否处于动画状态
在使用animate()方法的时候，要避免动画积累而导致的动画与用户的行为不一致。当用户快速在某个元素上执行animate()动画时，就会出现动画积累。解决方法是判断元素是否正处于动画状态，如果元素不处于动画状态，才为元素添加新的动画，否则不添加。
if(!$(element).is(":animated")){}
7、其他动画方法
除了上面提到的动画方法，jQuery中还有3个专门用于交互的动画方法。
toogle(speed,callback)
slideToggle(speed,callback)
fadeTo(speed,opacity,callback)
(1)、toggle()方法
toggle()方法可以切换元素的可见状态，
(2)、slideToggle()方法
slideToggle()方法通过高度变化来切换匹配元素的可见性。这个动画效果只调整元素的高度
(3)、fadeTo()方法
fadeTo()方法可以把元素的不透明度以渐进方式调整到指定的值，这个动画只调整元素的不透明度，即匹配的元素的高度和宽度不会发生变化。
原文：http://my.oschina.net/u/2263278/blog/531223
内容总结
以上是互联网集市为您收集整理的五、jQuery中的动画全部内容，希望文章能够帮你解决五、jQuery中的动画所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。