jQuery 效果：
阿新 • • 發佈：2022-03-22
jQuery 效果：
隱藏與顯示：
隱藏：
$("#hide").click(function(){
$("p").hide();
});
顯示：
$("#show").click(function(){
$("p").show();
});
隱藏與顯示的速度：
$("button").click(function(){ $("p").hide(1000); }); $("button").click(function(){ $("p").show(1000); });
toggle( 使用 toggle() 方法來切換 hide() 和 show())：
jQuery Fading 方法：
可以實現元素的淡入淡出效果
淡入已隱藏的元素：
$("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); }); 淡出可見元素： $("button").click(function(){ $("#div1").fadeOut(); $("#div2").fadeOut("slowjQuery fadeToggle() 方法：
jQuery fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換。
$("button").click(function(){ $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000); });jQuery fadeTo() 方法：
jQuery fadeTo() 方法允許漸變為給定的不透明度（值介於 0 與 1 之間）
$("button").click(function(){jQuery 滑動方法：
slideDown() 方法用於向下滑動元素：
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
<div id="flip">點我，顯示或隱藏面板。</div>
<div id="panel">Hello world!</div>
jQuery 動畫 - animate() 方法：
把 <div> 元素往右邊移動了 250 畫素：
$("button").click(function(){ $("div").animate({left:'250px'}); }); 如需對位置進行操作，要記得首先把元素的 CSS position 屬性設定為 relative、fixed 或 absolute！ animate()生成動畫的過程中可同時使用多個屬性： $("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', （不透明屬性） height:'150px', width:'150px' }); });使用預定義的值：
$("button").click(function(){ $("div").animate({ height:'toggle' }); });jQuery 方法連結：
如需連結一個動作，您只需簡單地把該動作追加到之前的動作上。
$("#p1").css("color","red") .slideUp(2000) .slideDown(2000);