4.2.1 show() 方法和 hide() 方法
1 show() 方法和 hide() 方法
show() 方法和 hide() 方法是最基本的动画方法。在HTML 文档内,为一个元素调用 hide() 方法,会将该元素的 display 样式改为 “none”;
$("element").hide(); //通过 hide() 隐藏元素 //等同于 element.css("display","none"); // 通过css隐藏元素
当把元素隐藏后,可以使用 show() 方法显示
$("element").show();
通过 show() 和hide() 控制内容的显示和隐藏
$(function(){ $("elem").toggle(function(){ $("p").hide(); },function(){ $("p").show(); }); })
2 show() 和 hide() 让元素动起来
可以为show() 添加一个参数,让元素慢慢显示。
$("element").show("slow"); //600s显示出来 $("element").show("normal"); //400s显示出来 $("element").show("fast"); //200s显示出来
4.2.2 fadeIn() 方法 和 fadeOut() 方法
fadeIn() 和 fadeOut() 方法改变元素的透明度(淡入淡出)
<script type="text/javascript"> $(function(){ $("#panel h5.head").toggle(function(){ $(this).next().fadeOut(800); },function(){ $(this).next().fadeIn(800); }) }) </script> </head> <body> <div id="panel"> <h5 class="head">什么是jQuery?</h5> <div class="content"> 文本内容 </div> </div>
4.2.3 slideUp() 和 slideDown() 方法
slideUp() 和 slideDown() 只会改变元素的高度。(卷动效果)
4.2.4 自定义动画方法 animate()
animate() 方法语法
animate(params, speed, callback);
参数说明:
①params: 一个包含样式属性及值的映射,比如{property1:"value1", property2:"value2", .......}
②speed: 速度参数,可选
③callback: 在动画完成时执行的函数,可选
1 自定义简单动画
先创建一个HTML文档
<style type="text/css"> *{margin:0;padding:0;} body { padding: 60px } #panel {position: relative; width: 100px; height:100px;border: 1px solid #0050D0;background: #96E555; cursor: pointer} </style> </head> <body> <div id="panel"></div> </body> </html>
为了能使元素动起来,需要更改元素的“left”样式属性,在使用 animate() 之前。为了能影响元素的位置样式,必须先把元素的 position 设置为“relative” 或者“absolute” .
<script type="text/javascript"> $(function(){ $("#panel").click(function(){ $(this).animate({left:"500px"},3000); }); }) </script>
效果:
2 累加、累减动画
$(function(){ $("#panel").click(function(){ $(this).animate({left:"+=500px"},3000); }); }) </script>
当方块移动到目的地后,再点击,后继续后移。
3 多重动画
①同时执行多个动画
在元素滑动过程,放大元素高度
<script type="text/javascript"> $(function(){ $("#panel").click(function(){ $(this).animate({left:"500px",height:"200px"},3000); }); }) </script>
<div> 在向右滑动同时,会放大高度
②按顺序执行多个动画
上例中2种效果是同时发生的。如果想按顺序执行,例如先移动到某个位置后,再放大。可以拆开代码即可
$(function(){ $("#panel").click(function(){ $(this).animate({left:"500px"},3000) .animate({height:"200px"},3000); }); })
4 综合动画
示例:单击<div> 元素后让它向右移动的同时增大它的高度,并将它的不透明度从50%变换到100%,然后再让它从上到下移动,同时宽度变大,当完成效果后,让它以淡出的方式隐藏。
$(function(){ $("#panel").css("opacity","0.5"); //先设置不透明度 $("#panel").click(function(){ $(this).animate({left:"500px",height:"200px",opacity:"1"},3000) .animate({top:"200px","200px"},3000) .fadeOut("slow"); }); })
4.2.5 动画回调函数
上例中,如果想在最后一步切换元素 CSS样式,而不是隐藏元素
如果只是将 .fadeOut("slow") 改为 css("border","5px solid blue") ;是无法达到预期效果,因为在刚开始执行动画时,css() 方法就被执行了
原因是css() 并不会加入到动画队列中,而是立即执行,可以使用回调函数,对非动画方法实现排队,只要把 css() 方法写在最后一个动画的回调函数中即可
$(function(){ $("#panel").css("opacity","0.5"); //先设置不透明度 $("#panel").click(function(){ $(this).animate({left:"500px",height:"200px",opacity:"1"},3000) .animate({top:"200px","200px"},3000,function(){ $(this).css("border","5px solid blue"); }); }); })
4.2.6 停止动画和判断是否处于动画效果
1 停止元素的动画
如果需要在某处停止动画,需要使用stop() 方法
stop([clearQueue][,gotoEnd]);
2个参数都是可选参数,为Boolean值 。clearQueue 代表是否要清空未执行的动画队列,gotoEnd 代表是否直接将正在执行的动画跳转到末状态。
如果直接使用stop() ,则会立即停止当前正在进行的动画。
比如:在为一个元素绑定 hover 事件后,用户把光标移入元素时会触发动画效果,而当这个动画还未结束时,用户就将光标移出这个元素,那么光标移出的动画效果将会被放进队列中,等待光标移入的动画结束后再执行。因此如果光标移入移出的过快就会导致动画效果与光标动作不一致,此时只要在光标的移入,移出动画之前加入 stop() 方法,就能解决。
stop() 会结束当前正在进行的动画,并立即执行队列中下一个动画。
$(function(){ $("#panel").hover(function() { $(this).stop().animate({height : "150",width : "300"} , 200 ); },function() { $(this).stop().animate({height : "22",width : "60" } , 300 ); }); });
如果是组合动画。需要 stop() 方法传入一个参数 true
$(function(){ $("#panel").hover(function() { $(this).stop(true) .animate({height : "150" } , 200 ) .animate({width : "300" } , 300 ) },function() { $(this).stop(true) .animate({height : "22" } , 200 ) .animate({width : "60" } , 300 ) }); });
stop() 只能停止正在进行的动画,如果动画在执行第一阶段,触发后,只会停止当前的活动,并继续进行下面的动画,而光标移出事件中的动画要等这个动画结束后才会继续执行,当传入 true 后,此时程序会把当前元素接下来尚未执行完的动画队列都清空。
也可以两者结合起来使用 stop(true,true) ,即停止当前动画并直接到达当前动画的末状态,并清空动画队列。
注意: jQuery只能设置正在执行的动画的最终形态,而没有提供直接到达未执行动画队列最终状态的方法。
例如有一组动画:
$("div.content") .animate({"300"},200) .animate({height:"150"},300) .animate({opacity:"0.2"},2000);
无论如何设置 stop() 方法,都无法改变“width”和“height”时,将此<div>元素的末状态变成 300*150的大小,并且设置透明度为 0.2.、
2 判断元素是否处于动画状态
在使用 animate() 方法的时候,要避免动画积累而导致的动画与用户的腥味不一致,当用户快速在某个元素上执行animate()动画时,就会出现动画积累,解决方法是判断元素是否正处于动画状态,如果元素不处于动画状态,才为元素添加新的动画,否则不添加。
if(!$(element).is(":animated")){ //判断元素是否处于动画状态 //如果当前没有进行动画,则添加动画 }
这个判断方法在 animate()动画中经常被用到。
4.2.7 其他动画方法
jQuery 中还有3个专门用于交互的动画方法
♦ toggle(speed,[callback]);
♦ slideToggle(speed,[callback]);
♦ fadeTo(speed,opacity,[callback]);
1 toggle() 方法
toggle() 方法可以切换元素的可见状态,如果元素可见,切换为隐藏,如果隐藏,切换为可见
$("elem").click(function(){ $(this).next("div").toggle(); }) // 等价于 <script type="text/javascript"> $("elem").toggle(function(){ $(this).next("div").hide(); },function(){ $(this).next("div").show(); }) </script>
2 slideToggle() 方法
slideToggel()方法通过高度变化来切换匹配元素的可见性,这个动画效果只调整元素高度
$("elem").click(function(){ $(this).next("div").slideToggle(); }) //等价于 $("elem").toggle(function(){ $(this).next("div").slideUp(); },function(){ $(this).next("div").slideDown(); })
3 fadeTo() 方法
fadeTo() 方法可以把元素的不透明度以渐进方式调整到指定的值,这个动画只调整元素的不透明度,即匹配的元素的高度和宽度不会发生变化。
<script type="text/javascript"> $("elem").click(function(){ $(this).next("div").fadeTo(600, 0.2); }) </script>
4.2.8 动画方法概括
1 改变样式属性
方法名 |
说明 |
hide()和show() |
同时修改多个样式属性,即高度、宽度和不透明度 |
fadeIn()和fadeOut() |
只改变不透明度 |
slideUp()和slideDown() |
只改变高度 |
fadeTo() |
只改变不透明度 |
Toggle() |
用来代替hide()和show() 方法,会同时修改多个样式 |
slideToggle() |
用来代替slideUp()和slideDown()方法,只改变高度 |
Animate() |
属于自定义动画方法,以上各种动画方法实质内部调用了animate() 方法,此外,直接使用 animate() 方法还能自定义其他的样式属性,例如:”left”,”marginLeft”,”scrollTop”….. |
♦ animate() 方法可以代替其他所有的动画方法
<script type="text/javascript"> // 用animate() 代替show() 方法 $("p").animate({height:"show","show",opacity:"show"},400); //等价于 $("p").show(400); // 用animate() 代替fadeIn() 方法 $("p").animate({opacity:"show"},400); //等价于 $("p").indeIn(400); //用animate() 代替slideDown() 方法 $("p").animate({height:"show"},400); //等价于 $("p").slideDown(400); //用animate() 代替fadeTo()方法 $("p").animate({opacity:"0.5"},400); //等价于 $("p").fadeTo(400, 0.5); </script>
事实上,这些动画就是animate()方法一种内置了特定样式属性的简写形式。在animate() 方法中,这些特定样式属性值可以为|“show”“hide”“toggle”,也可以是自定义数字(值)。
2 动画队列
①一组元素上的动画效果
当在一个animate() 方法中应用多个属性时,动画是同时发生的
当以链式的写法应用动画时,动画是按顺序发生的
②多组元素上的动画效果
默认情况下,动画都是同时发生的
当以回调的形式应用动画方式时,动画是按照回调顺序发生的
♠ 在动画方法中,要注意其他非动画方法会插队,例如 CSS() 方法要使非动画方法也按照顺序执行,需要把这些方法写在动画方法的回调函数中。