jQuery动画内容

jQuery动画

1、jQuery隐藏显示

可以使用hide()和show()方法来隐藏和显示HTML元素。不占位置
本质是在行内样式表中添加了display:none样式。

$("#hide").click(function(){ 

$("p").hide(); 

}); 

$("#show").click(function(){ 

$("p").show(); 

});

可以使用toggle()方法来切换hide()和show()方法。

$("button").click(function(){ $("p").toggle(); });

2、jQuery淡入淡出
参数可以控制淡出的时间 slow 毫秒 “normal” “fast”

fadeIn()用于淡入已隐藏的元素，fadeOut()方法用于淡出可见元素。

$("button").click(function(){

$("#div1").fadeIn(); 

$("#div2").fadeIn("slow"); 

$("#div3").fadeOut(3000); 

});

fadeToggle()方法可以在fadeIn()与fadeOut()方法之间进行切换。

$("button").click(function(){ ("#div2").fadeToggle("fast");});

3、jQuery滑动

slideDown()方法用于向下滑动元素，slideUp()方法用于向上滑动元素。

$("#flip").click(function(){ $("#div1").slideDown(); $("#div1").slideUp();});

slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换

$("#flip").click(function(){ $("#panel").slideToggle(); });

4、jQuery自定义动画
参数是对象

animate()方法用于创建自定义动画。可选的speed参数规定效果的时长。它可以取以下值：“slow”、"fast"或毫秒。可选的callback参数是动画完成后所执行的函数名称。

$("button").click(function(){ 

$("div").animate({ 

left:'250px', opacity:'0.5', height:'150px', width:'150px'

 }); });

5、stop方法

jQuerystop()方法用于停止动画或效果，在它们完成之前，适用于所有jQuery效果函数，包括滑动、淡入淡出和自定义动画。

$("#stop").click(function(){ $("#panel").stop(); });

6、回调函数

在当前动画100%完成之后执行。

$("button").click(function(){ 

$("p").hide("slow",function(){ 

alert("段落现在被隐藏了"); 

}); });