目錄

• 1.控制元素的顯示與隱藏 show() hide()
• 2.控制元素的透明度 fadeIn() fadeOut()
• 3：控制元素的高度 slideUp() slideDown()
• 總結

提供了一些預設的動畫
    控制元素的顯示與隱藏	    show()	hide()
	控制元素的透明度	        fadeIn()	fadeOut()
	控制元素的高度		    slideUp()		slideDown()
	自定義動畫			    animate()

1.控制元素的顯示與隱藏 show() hide()

語法：

 $("selector").show([speed],[callback]);

參考描述：

引數一：速度，可選 例如：1000毫秒等等與1秒 fast slow normal

引數二：回撥函式，可選 show或hide函式執行完之後，要實行的函式

$(function () {
			$(".nav-ul li").on({"mouseover":funwww.cppcns.comction () {
					$(this).("background","pink")
		www.cppcns.com		},"mouseout":function () {
					$(this).css("background","#ff2832")
				}});
			$(".menu-btn").hovzgHTFvw
 
er(function () {
				$(this).next().show("fast")
			},function () {
				$(this).next().hide("slow")
			})
		})

2.控制元素的透明度 fadeIhttp://www.cppcns.comn() fadeOut()

語法：

    $("selector").fadeIn([speed],[callback]);
    $("selector").fadeOut([speed],[callback]);

參考描述：

引數一：速度，可選 預設是0 例如：1000毫秒等等與1秒 fast slow normal

引數二：回撥函式，可選 fadeIn或fadeOut執行完以後函式執行完之後，要實行的函式

$(function () {
		$("input[name='fadein_btn']").click(function () {
			$("img:eq(0)").fadeIn(500,function () {
				alert("淡入成功")
			})
		})
		$("input[name='fadeout_btn']").click(function () {
			$("img:eq(0)").fadeOut(1000,function () {
				alert("淡出成功")
			})
		})
	})

3：控制元素的高度 slideUp() slideDown()

slideDown()使元素逐漸延伸顯示

slideUp()使元素逐漸縮短直至隱藏

語法：

    $("selector").slideUp([speed],[callback]);
    $("selector").slideDown([speed],[callback]);

參考描述：

引數一：速度，可選 預設是0 例如：1000毫秒等等與1秒 fast slow normal

引數二：回撥函式，可選 slideUp或slideDown執行完以後函式執行完之後，要實行的函式

總結

本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注我們的更多內容！