jQuery (二) 效果學習

在jQuery中有許多可視的效果，而且非常的方便，下面總結一下常見的效果

1. jQuery的隱藏和顯示

jQuery   hide() 隱藏對應的html標籤

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

jQuery   show() 顯示對應的html標籤

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

jQuery toggle() 切換hide()和show()

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

2. jQuery的淡入和淡出

jQuery fadeIn(); 淡入

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

speed 可選“slow”、“fast”和毫秒

jQuery fadeOut(); 淡出

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

jQuery fadeToggle(); 淡入和淡出切換

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

jQuery fadeTo(): 可以給定不透明度

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

3. jQuery滑動

jQuery slideDown() 下滑

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

jQuery slideUp() 上滑

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

jQuery slideToggle() 下滑和上滑切換

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

4.jQuery動畫

jQuery animate() 方法創建自定義動畫

$(selector).animate({params},speed,callback); 其中params參數是必須輸入的自定義動畫的css屬性

注意：對位置進行操作時，首先必須把CSS的position屬性設置爲relative、fixed、absolute

例子：

$("#test").click(function(){
	$("div").animate({
		left:'120px',
		opacity:'0.5'
		height:'100px',
		width:'100px'
	});
})

5. stop()

jQuery stop() 可以停止滑動和動畫

$(selector).stop(stopAll,goToEnd);  參數stopAll是否清除當前動畫隊列，goToEnd參數規定是否立即完成當前動畫，兩個參數默認都是false

例子：

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

6. Callback

jQuery Callback函數

當效果動畫100%完成後，即可調用Callback函數，上面交的隱藏、 顯示、淡入、淡出、滑動、動畫都可以用這個函數

例子：

$("#test").hide(3000,function(){
alert("test the callback");
})

7. Chaining

jQuery Chaining 允許一條語句執行多個jQuery方法

例子

$("#test").slideUp(2000).slideDown(2000).fadeIn(2000).fadeOut(2000);

參見：http://www.w3school.com.cn/jquery/jquery_hide_show.asp