jQuery

效果

1)基本 2)滑過 3)淡入淡出 4)自定義 5)設置

基本

show（顯示隱藏的匹配元素。）

css代碼 <p style="display: none">hello,hehe</p> jquery代碼 $("p").show(); 動畫效果 1)$("p").show("slow");2)$("p").show("normal");3)$("p").show("fast");4)$("p").show(1000,"swing",function(){console.log("動畫執行完成") });

hide（隱藏顯示的元素。）

css代碼 <p>hello,hehe</p> jquery代碼 $("p").hide(); 動畫效果 1)$("p").hide(1000);2)$("p").hide("slow");3)$("p").show("normal");4)$("p").show("fast");

toggle（用于綁定兩個或多個事件處理器函數，以響應被選元素的輪流的 click 事件。）

css代碼 <p>hello,hehe</p> <input type="button" value="切換" id="btn1"> jquery代碼 $("#btn1").click(function(){$("p").toggle("normal"); })另一種（2個或者多個）function a(){alert("hehe1") } function b(){alert("hehe2") } $("p").toggle(a,b);

滑過

slideDown（通過高度變化（向下增大）來動態地顯示所有匹配的元素，在顯示完成后可選地觸發一個回調函數。）

css代碼 <p style="width:300px;height: 500px;background:red;display: none">hello,hehe</p> <input type="button" value="切換" id="btn1"> jquery代碼 $("#btn1").click(function(){$("p").slideDown() });

slideUp（通過高度變化（向上減小）來動態地隱藏所有匹配的元素，在隱藏完成后可選地觸發一個回調函數。）

css代碼 <p style="width:300px;height: 500px;background:red;display: none">hello,hehe</p> <input type="button" value="切換2" id="btn2"> jquery代碼 $("#btn2").click(function(){$("p").slideUp() });

slideToggle（通過高度變化來切換所有匹配元素的可見性，并在切換完成后可選地觸發一個回調函數。
）

css代碼 <p style="width:300px;height: 500px;background:red;display: none">hello,hehe</p> <input type="button" value="切換3" id="btn3"> jquery代碼 $("#btn3").click(function(){$("p").slideToggle() });

淡入淡出

fadeIn（通過不透明度的變化來實現所有匹配元素的淡入效果，并在動畫完成后可選地觸發一個回調函數。）

html代碼div{width: 200px;height: 200px;background: red;display: none;} css代碼<input type="button" value="淡入"><div></div> jquery代碼 $("input").first().click(function(){$("div").fadeIn(5000); })

fadeOut（通過不透明度的變化來實現所有匹配元素的淡出效果，并在動畫完成后可選地觸發一個回調函數。）

html代碼div{width: 200px;height: 200px;background: red;display: none;} css代碼<input type="button" value="淡出"><div></div> jquery代碼 $("input").eq(1).click(function(){$("div").fadeOut(5000); })

fadeOut（通過不透明度的變化來實現所有匹配元素的淡出效果，并在動畫完成后可選地觸發一個回調函數。）

html代碼div{width: 200px;height: 200px;background: red;display: none;} css代碼<input type="button" value="淡出"><div></div> jquery代碼 $("input").eq(1).click(function(){$("div").fadeTo(1000,0.5); })

自定義

animate（用于創建自定義動畫的函數。）

html代碼span{background: red;opacity:0;position: absolute;} css代碼<span>123</span> jquery代碼 $("span").animate({"width":"300px","opacity":"1","font-size":"3em","height":"100px","left":"300px","top":"100px" },3000,function(){console.log("動畫完成") })

轉載于:https://www.cnblogs.com/WWWrs/p/6869435.html

總結

以上是生活随笔為你收集整理的jQuery之效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。