jQuery入門基礎（四）：動畫和特效

標籤：

//顯示和隱藏

hide()的文法形式：$(selector).hide(speed,callback);//speed:“fast”;"slow"；毫秒數————callback_在顯示／隱藏之後的事件

show()的文法形式：$(selector).show(speed,callback);

$(function (){    $("#hide").click(function(){        $("div").hide(1000);    })    $("#show").click(function(){        $("div").show(1000);    })});

//淡入和淡出

fadeIn()文法：$(selector).fadeIn(speed,callback);// 淡入隱藏的元素

fadeOut()文法：$(selector).fadeOut(speed,callback);// 淡出可見的元素

fadeToggle()的文法：$(selector).fadeToggle(speed,callback);// 在fadeIn()和fadeOut()之間切換

fadeTo()的文法：$(selector).fadeTo(speed,opacity,callback);// 允許漸層給定的不透明度,不透明度在0～1之間

$(function (){    $("button").click(function(){        $("#div1").fadeIn();          $("#div2").fadeIn(1000);          $("#div3").fadeIn("slow");    });})$(function(){    $("button").click(function(){        $("#div1").fadeOut()        $("#div2").fadeOut(1000);          $("#div3").fadeOut("slow");    })})$(function(){    $("button").click(function(){        $("#div1").fadeToggle()        $("#div2").fadeToggle(1000);          $("#div3").fadeToggle("slow");    })})$(function(){    $("button").click(function(){        $("#div1").fadeTo("fast",015)        $("#div2").fadeTo(1000,0.2);          $("#div3").fadeTo("slow",0.5);    })})

//滑動效果

slideDown()文法：$(selector).slideDown(speed,callback);// slideDown()向下滑動元素

slideUp()文法：$(selector).slideUp(speed,callback);// slideUp()用於向上滑動元素

slideToggle()的文法：$(selector).slideToggle(speed,callback);// slideToggle()可以在 slideDown() 與 slideUp() 方法之間進行切換

$(function (){    $("button").click(function(){        $("#div1").slideDown("slow");       })    $("button").click(function(){        $("#div2").slideUp("slow");       })    $("button").click(function(){        $("#div2").slideToggle("slow");      })});

//動畫效果

文法：$(selector).animate({params},speed,callback);//params為必要參數定義形成動畫的CSS屬性。speed和callback是選擇性參數，前者規定效果的時間長度，取值為："slow"、"fast"和毫秒；後者是動畫完成後執行的函數名稱。

$(function (){    $("#btn").click(function(){    $("div").animate({        height:"200px",          width:"660px"    },"slow",function(){    $("div").animate({        height:"80px",          width:"80px"    },"slow" )      })});})

//停止效果

文法：$(selector).stop(stopAll,goToEnd); // stopAll和goToEnd 參數都是可選的。前者規定是否應該清除動畫隊列，預設是false，即僅停止活動的動畫，允許任何排入隊列的動畫向後執行；後者規定是否立即完成當前動畫，預設是false

$(function(){    //jQuery代碼    $("#flip").click(function(){    $("#panel").slideToggle(1000);    });      $("#stop").click(function(){    $("#panel").stop();    })});

 

jQuery入門基礎（四）：動畫和特效