jquery學習筆記2——jq效果

標籤：ams   屬性   ogg   als   nbsp   語句   toe   div移動   slide   

一、顯示隱藏：

可以使用show（）和hide（）方法來顯示隱藏；

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

　　可以使用toggle（）方法在show（）方法和hide（）方法中間切換；

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

　　文法：

$(selector).show(speed,callback);$(selector).hide(speed,callback);$(selector).toggle(speed,callback);//其中speed 和callback都是選擇性參數，speed單位為毫秒（如設定成1000,2000等）；callback為回呼函數；

　　

二、淡入淡出：

方法：fadeIn();　　　　 fadeOut();　　　　fadeToggle();　　　　fadeTo()

$("#btn").click(function(){    $("#div1").fadeIn();    $("#div2").fadeOut(2000);    $("#div3").fadeIn("slow")  ;})

　　文法：

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

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

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

#("#btn").click(function(){   $("#div4").fadeTo(slow,0.12);});

　　fadeTo可以使對象漸層成給定的透明度值（結餘0到1之間）；

      文法：fadeTo(speed,opacity,callback);

 

三、滑動：

方法：slideDown()　　　　　　slideUp()　　　　slideToggle()

$("button").click(function(){    $("#p1").slideUP("slow");      //向上滑動隱藏    $("#p2").slideDown("slow");      //向下滑動隱藏    $("#p3").toggle("slow");      //切換   });

　　文法：

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

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

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

 

四、animate動畫：

文法：

$(selector).animate({params},speed,callback);

　　必須：params參數定義形成動畫後的css屬性；

　　可選：speed參數為效果時間長度；

　　可選：callback為回呼函數；

　　　1、多參數設定

$("#dtn").click(function(){    $("div").animate({
　　left:‘20px’，
　　opcity:‘0.2‘,
　　height:‘150px‘,
　　width:‘150px‘
　　})；});

　　2、animate也可以使用相對值：

$("button").click(function(){    $("#div5").animate({    left:‘150px‘,    height:‘+=20px‘,    width:‘+=30px‘,    });});

　　3、可以將animate設定為”show“，”hide“，”toggle“。

$("button").click(function(){  $("div").animate({    height:‘toggle‘  });});

　　效果：在設定值與預設值之間切換；

　　4、使用隊列功能：　

$("button").click(function(){      var div=$("div");      div.animate({height:‘300px‘,opacity:‘0.4‘},"slow");      div.animate({width:‘300px‘,opacity:‘0.8‘},"slow");      div.animate({height:‘100px‘,opacity:‘0.4‘},"slow");      div.animate({width:‘100px‘,opacity:‘0.8‘},"slow");   });

　　可以設定多個內部”隊列“，執行時候會依次進行animate調用

　　5、動畫舉例：

$("button").click(function(){  var div=$("div");  div.animate({left:‘100px‘},"slow");  div.animate({fontSize:‘3em‘},"slow");});

　　效果：將div移動到右邊，增加文本字型大小；

 

五、stop（）方法；

　　stop（）方法用於停止、中斷jQuery效果；

文法：

$(selector).stop(stopAll,goToEnd);

　　可選：stopAll，是否應該清除動畫隊列。預設false，僅會停止當前動畫，後續動畫依次執行；

　　可選：goToEnd，是否立即完成當前動畫，預設false。

　　因此,預設的stop（）會清除元素上正在執行的動畫；

六、callback  回呼函數

callback：在當前動作完成之後執行。作為選擇性參數；

如果你希望在一個涉及動畫的函數之後執行一條語句，請使用callback；

$("p").hide(1000,function(){　　alert("The paragraph is now hidden");});

七、Chaining 動作鏈

　允許我們在一條語句之中用多個jQuery方法,在一個對象上連續使用多個方法，依次執行；

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

　　

 

jquery學習筆記2——jq效果