标签:
jQuery中的动画
【show()方法和hide()方法】
在HTML文档中,为一个元素调用hide()方法,会将该元素的display样式改为“none”,show()方法将元素的display样式改为先前的显示状态。
$(function(){ $("#pane1 h5.head").toggle(function(){ $(this).next().hide(); }.function(){ $(this).next().show(); }); });
用jQuery做动画效果要求要在标准模式下,否则可能会引起动画抖动。
让元素动起来
如果希望在调用show()方法时,元素慢慢的显示出来,可以为show()方法指定一个速度参数。如,指定一个速度关键字“slow”
$("element").show("slow");
运行该代码后,元素将在600毫秒内慢慢地显示出来,还有其他关键字“normal”和“fast”。还可以为显示速度指定一个数字,单位是毫秒。
【fadeIn()方法和fadeOut()方法】
此方法只改变元素的不透明度。fadeOut()方法会在指定的一段时间内降低元素的不透明度,知道元素完全消失,fadeIn()则相反。
$(function(){ $("#pane1 h5.head").toggle(function(){ $(this).next().fadeOut(); }.function(){ $(this).next().fadeIn(); }); });
【slideUp()方法和slideDown()方法】
此方法只会改变元素的高度。如果一个元素的display属性值为“none”,当调用slideDown()方法时,这个元素将由上至下延伸显示。slideUp()方法正好相反。
【自定义动画方法animate()】
语法结构:animate(params,speed,callback);
参数说明:params:一个包含样式属性及值的映射,比如{property:"value1",property2:"value2",.....}。
speed:速度参数,可选。
callback:在动画完成时执行的函数,可选。
自定义简单动画:
$(function(){ $("pane1").click(function(){ $(this).animate({left:"500px"},3000); }); });
作用:使元素在3秒内,向右移动500像素。且css代码中设置的是“position:relative”。
累加、累减动画:在500px之前加上“+=”或者“-=”符号即可表示在当前位置累加或者累减。{left:"+=500px",3000};
多重动画
(1)同时执行多个动画:
$(function(){ $("myImg").click(function(){ $(this) .animate({left:"500px",height:"200px"},3000); //<div>元素在向右滑动同时,也会放大高度 }); });
(2)按顺序执行多个动画:只需要把代码拆开,然后按照顺序写。
$(this).animate({left:"500px"},3000); $(this).animate({height:"500px"},3000); //也可以改为链式写法 $(this).animate({left:"500px"},3000); .animate({height:"500px"},3000);
综合动画
【动画回调函数】
可以使用回调函数(callback)对非动画方法实现排队。只要把css()方法写在最后一个动画的回调函数里即可:
$("pane1").click(function(){ $(this).animate({left:"400px",height:"200px",opacity:"1"},3000) .animate({top:"200px",width:"200px"},3000) $(this).css("border","5px solid blue"); }) });
callback回调函数适用于jQuery所有的动画效果方法。
【停止动画和判断是否处于动画状态】
停止元素的动画:stop()方法。语法结构:stop([clearQueue],[gotoEnd]);参数clearQueue和gotoEnd都是可选参数,为Boolean值。clearQueue代表是否要清空未执行完的动画队列,gotoEnd代表是否直接将正在进行的动画跳转到末状态。
判断元素是否处于动画状态:
if(!$(element).is(":animated")){ //判断元素是否正处于动画状态 //如果当前没有进行动画,则添加新动画 }
延迟动画:delay()方法。可以将队列中的函数延迟执行。它既可以推迟动画队列中函数的执行,也可以用于自定义队列。
【其他动画方法】
toggle()方法:切换元素的可见状态。
slideToggle()方法:通过高度变化来切换匹配元素的可见性。
fadeTo()方法:可以把元素的不透明以渐进方式调整到指定的值。
fadeToggle()方法:通过不透明度来切换匹配元素的可见性。
【动画方法概括】
特别注意animate()方法,可以使用它来替代其他所有的动画方法。详情在《锋利的jQuery》P132页。
标签:
原文地址:http://www.cnblogs.com/wlfsmile/p/5909027.html