jquery动画效果总结
一.jquery的动画速度fast-slow对应着600ms,200ms,不写是400ms
二.禁用jquery的动画
将jQuery.fx.off设置为true即可
$(".stopping").click(function(){
jQuery.fx.off = true;//禁用所有jquery的动画
})
三.jquery动画是异步的调用动画方法时会立刻返回,动画则在"后台"执行,也就是方法会在动画之前完成,所以可以给动画方法添加第二个参数
$("#message").fadeIn("slow",function(){
$(this).text("动画执行后再修改的内容");
});
四.jquery动画还可以传入一个对象来调用动画方法
//$("#message").fadeIn({ // duration: "fast", // complete: function(){ // $(this).text("动画执行后再修改的内容"); //});
五.简单动画fadeIn,fadeOut,fadeTo
需要传入一个opacity目标值,fadeTo会将元素的当前opacity值变化到目标值,调用fadeTo的方法时,第一参数必须是时长(或选项对象),第二参数是opacity目标值,回调函数是可选的第三个参数
$("#message").fadeTo("0.5","0.1");
show,hide toggle
注意:fadeOut让元素不可见,但依然保留了隐藏元素在文档中的占位
hide方法则会将元素从布局中移除等同于display:none一样
toggle()可以改变在上面调用它的元素的可视状态,隐藏调用show(),显示则调用hide,必须传入时长或选线对象给toggle来产生动画效果,
参数true等同show(),参数false等同hide(),如果传入两个或多个函数参数给toggle(),则会注册为事件处理程序.
slideDown(),slideUp(),slideToggle()
slideUp()会因此jquery中的元素,将其高度变化到0,再设置display的属性为none,slideToggle()来切换可见性,
$("#img").click(function(){
$("#img").slideToggle("800");
});
$("#img").fadeOut().show(300).slideUp().slideToggle();
})
六.自定义动画
animate()有2个参数,
第一个是必须的,必须是一个css对象,该对象的属性指定要变化的css属性和他们的目标值.比如上面表述的slideUp()效果可以用一下代码代替
$("img").animate({height: 0px});
第二个参数是可选的,用来指定动画如何执行,可以传入一个选项对象给animate()方法
$("#btn").click(function(){
$("#img").fadeIn(500).animate({"width:":"+=100"},{queue:false,duration:1000}).fadeOut(500);
})
上面的fadeIn(500)和fadeOut效果是序列化的,但是animate的调用在1000毫秒内连续变化width属性是非队列化的,这段width动画和fadeIn的效果的开始时间相同,fadeOut的效果会在fadeIn效果完成时立刻开始,它不会等到width动画完成.
七.jquery缓动函数
实现方式一:
使用specialEasing 选项来指定自定义缓动函数
$("#img").animate({"width":"hide","height":"hide",opacity:"hide"},
{specialEasing:{width:"linear",height:"linear"}});
实现方式二:
在第一个对象参数中传入[目标值,缓动函数] 数组
$("#btn").click(function(){
$("#img").animate({width:["hide","linear"],height:["hide","linear"],opacity:"hide"});
});
八,动画的取消,延迟和队列
1.stop():停止选中元素上的当前正在执行的任何动画 stop():接受两个可选的布尔值参数,
如果第一个参数是true,会清除改选中元素上的动画队列:除了停止当前动画,还会取消任何等待执行的动画,第一个参数默认值是false:若忽略,等待执行的动画不会被取消.
第二个参数用来指定正在连续变化的css属性是否保留当前值,还是应该变化到最终目标值.true:变化到目标值;false:保持当前值
$("#img").bind({mouseover:function(){$(this).stop().fadeTo(300,1.0)},
mouseout:function(){$(this).stop().fadeTo(300,0.5)}
});
2.delay(),第一参数时长,第二个参数是对列名(可选)
$("#img").fadeTo(100,0.5).delay(200).slideUp();
在上面的列子中,添加短延迟,遮掩鼠标快速画过图片不停留时,不会有任何分神动画产生
$("#img").bind({mouseover:function(){$(this).stop(true).delay(100).fadeTo(300,1.0)},
mouseout:function(){$(this).stop(true).fadeTo(300,0.5)}
});
3.queque() 给队列追加函数
淡入显示一个元素,稍等片刻,是指一些文字,然后变化边框
$("#img").fadeIn().delay(200).queue(function(next){
$(this).text("helloworld");
// next(); //运行队列的下一项
$(this).dequeue();//用来代替next();
}).animate({height:"2px"});
4.clearQueue();清除追加的函数
