jQuery学习笔记之二：显示效果

1、显示 隐藏

使用 hide() 和 show() 方法来隐藏和显示 HTML 元素；使用
toggle() 方法来切换 hide() 和 show() 方法。

语法：

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

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

$(selector).toggle(speed,callback);

其中speed 为隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒； callback
为执行操作hide()、show()、 toggle() 方法完成后所执行的函数名称。

<pre name="code" class="html">$("#hide").click(function(){
$("p").hide();
<pre name="code" class="html">  $("p").hide(2000);

});$("#show").click(function(){
$("p").show();});

</pre><span style="font-family: Verdana, Arial, 宋体; font-size: 13.3333px; line-height: 18px;"><span style="font-size: 12px; background-color: rgb(249, 249, 249);"><span style="font-size: 12px;"></span></span></span><pre name="code" class="html">$("#toggle").click(function(){
$("p").toggle();
});

2、淡入淡出(fadein fadeout fadetoggle fadeto)

语法：

$(selector).fadeIn(speed,callback);

$(selector).fadeOut(speed,callback);

$(selector).fadeToggle(speed,callback);

$(selector).fadeTo(speed,opacity,callback);

fadeIn() 用于淡入已隐藏的元素;fadeOut() 方法用于淡出可见元素;fadeToggle()
方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换;fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）,opacity为透明度值,speed和callback同1。

示例：

$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
<pre name="code" class="html">  $("#div1").fadeTo("slow",0.15);

});

3、滑动(slidedown slideup slidetoggle)

语法：

$(selector).slideDown(speed,callback);

$(selector).slideUp(speed,callback);

$(selector).slideToggle(speed,callback);

slideDown() 方法用于向下滑动元素；slideUp()
方法用于向上滑动元素； slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

4、自定义动画(animate)

语法：

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

params 参数定义形成动画的 CSS 属性。params的css属性即为动作后的最终属性。

示例1：

$("button").click(function(){
$("div").animate({left:'250px'});
});

示例2：

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

这种效果就像制作视频的过程一样，一帧一帧串起来就成了一个动画。

具体的动画效果可参见：http://www.w3school.com.cn/jquery/jquery_animate.asp
5、停止动画或者滑动(stop)

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

语法：

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

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。
示例：

$("#panel").stop();

6、链条式

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

可依次执行。