jQuery 效果

隐藏和显示

• hide（）
• show（）

语法

$(selector).hide(speed,callback);$(selector).show(speed,callback); 

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

实例

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

jQuery toggle()

使用toggle()的方法来切换hide()与show()方法

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

淡入与淡出

jQuery Fading方法

• fadeIn() 淡入已隐藏的元素
• fadeOut() 淡出可见元素
• fadeToggle() 在以上两者切换
• fadeTo() 渐变为给定透明度

语法：

 $(selector).fadeIn(speed,callback); $(selector).fadeOut(speed,callback); $(selector).fadeToggle(speed,callback); $(selector).fadeTo(speed,opacity,callback); //给定透明度在（0,1）之间

滑动

方法

• slideDown() 向下滑动元素。
• slideUp() 向上滑动元素。
• slideToggle()

例子

$(document).ready(function(){  $("#flip").click(function(){    $("#panel").slideDown("slow");  });});

动画

jQuery animate()方法允许您创建自定义的动画。

语法

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback参数是动画完成后所执行的函数名称。

html:<button>开始动画</button><p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p><div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

script:$(document).ready(function(){  $("button").click(function(){    $("div").animate({left:'250px'});  });});//向右移动了250px像素

多个属性

$("button").click(function(){  $("div").animate({    left:'250px',    opacity:'0.5',    height:'150px',    width:'150px'  });});

也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：

 height:'+=150px',width:'+=150px'

也可以把动画的属性值设为show hide toggle

队列功能

$("button").click(function(){    var div=$("div");    div.animate({height:'300px',opacity:'0.4'});    div.animate({width:'300px',opacity:'0.8'});    div.animate({height:'100px',opacity:'0.4'});    div.animate({width:'100px',opacity:'0.8'});  });

 $("button").click(function(){    var div=$("div");      div.animate({left:'100px'},"slow");    div.animate({fontSize:'3em'},"slow");  });

停止动画

jQuery stop()方法用于在动画或效果完成前对它们进行停止。

语法:

$(selector).stop(stopAll,goToEnd);

举例

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

jQuery Callback方法

Callback 函数在当前动画 100% 完成之后执行。
以下方法在隐藏效果完全实现后回调函数

$("button").click(function(){  $("p").hide("slow",function(){    alert("The paragraph is now hidden");  });});

以下无回调函数，在隐藏效果完成前弹出

$("button").click(function(){  $("p").hide(1000);  alert("The paragraph is now hidden");});

jQuery Chaining

通过jQuery，把动作方法链接到一起
下面的例子把 css()、slideUp() 和slideDown() 链接在一起。”p1”元素首先会变为红色，然后向上滑动，再然后向下滑动：

$("#p1").css("color","red").slideUp(2000).slideDown(2000);