jQuery 淡入淡出、滑動和動畫

一、淡入淡出

1、jQuery fadeIn() 方法

jQuery fadeIn() 用於淡入已隱藏的元素。

語法：$(selector).fadeIn(speed,callback);

可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。可選的 callback 參數是 fading 完成後所執行的函數名稱。

下面的例子演示瞭帶有不同參數的 fadeIn() 方法：

 



<script src=”/jquery/jquery-1.11.1.min.js”></script><script>

$(document).ready(function(){

  $(“button”).click(function(){

    $(“#p1”).fadeIn();

    $(“#p2”).fadeIn(“slow”);

    $(“#p3”).fadeIn(3000);

  });

});

</script>


演示帶有不同參數的 fadeIn() 方法。




 




 




 



 


 


 


2、jQuery fadeOut() 方法


jQuery fadeOut() 方法用於淡出可見元素。


語法：$(selector).fadeOut(speed,callback);


可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。可選的 callback 參數是 fading 完成後所執行的函數名稱。


下面的例子演示瞭帶有不同參數的 fadeOut() 方法：


 




<script src=”/jquery/jquery-1.11.1.min.js”></script><script type=”text/javascript”>

$(document).ready(function(){

  $(“button”).click(function(){

    $(“#p1”).fadeOut();

    $(“#p2”).fadeOut(“slow”);

    $(“#p3”).fadeOut(3000);

  });

});

</script>


演示帶有不同參數的 fadeOut() 方法。




 




 




 


 


 


 


3、jQuery fadeToggle() 方法


jQuery fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換。如果元素已淡出，則 fadeToggle() 會向元素添加淡入效果。如果元素已淡入，則 fadeToggle() 會向元素添加淡出效果。


語法：$(selector).fadeToggle(speed,callback);


可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。可選的 callback 參數是 fading 完成後所執行的函數名稱。


下面的例子演示瞭帶有不同參數的 fadeToggle() 方法：


 




<script src=”/jquery/jquery-1.11.1.min.js”></script><script>

$(document).ready(function(){

  $(“button”).click(function(){

    $(“#p1”).fadeToggle();

    $(“#p2”).fadeToggle(“slow”);

    $(“#p3”).fadeToggle(3000);

  });

});

</script>


演示帶有不同參數的 fadeToggle() 方法。




 




 




 


 


4、jQuery fadeTo() 方法


jQuery fadeTo() 方法允許漸變為給定的不透明度（值介於 0 與 1 之間）。


語法：$(selector).fadeTo(speed,opacity,callback);


必需的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。fadeTo() 方法中必需的 opacity 參數將淡入淡出效果設置為給定的不透明度（值介於 0 與 1 之間）。可選的 callback 參數是該函數完成後所執行的函數名稱。


下面的例子演示瞭帶有不同參數的 fadeTo() 方法：


 




<script src=”/jquery/jquery-1.11.1.min.js”></script><script>

$(document).ready(function(){

  $(“button”).click(function(){

    $(“#p1”).fadeTo(“slow”,0.15);

    $(“#p2”).fadeTo(“slow”,0.4);

    $(“#p3”).fadeTo(“slow”,0.7);

  });

});

</script>


演示帶有不同參數的 fadeTo() 方法。




 




 




 



 


 


 


 


二、滑動


1、jQuery slideDown() 方法


jQuery slideDown() 方法用於向下滑動元素。


語法：$(selector).slideDown(speed,callback);


可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。可選的 callback 參數是滑動完成後所執行的函數名稱。


下面的例子演示瞭 slideDown() 方法：


 




<script src=”/jquery/jquery-1.11.1.min.js”></script><script type=”text/javascript”>

$(document).ready(function(){

  $(“.flip”).click(function(){

    $(“.panel”).slideDown(“slow”);

  });

});

</script>


p.panel,p.flip

{

margin:0px;

padding:5px;

text-align:center;

background:#e5eecc;

border:solid 1px #c3c3c3;

}

p.panel

{

height:120px;

display:none;

}


W3School – 領先的 Web 技術教程站點


在 W3School，你可以找到你所需要的所有網站建設教程。


請點擊這裡






 


 


2、jQuery slideUp() 方法


jQuery slideUp() 方法用於向上滑動元素。


語法：$(selector).slideUp(speed,callback);


可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。可選的 callback 參數是滑動完成後所執行的函數名稱。


下面的例子演示瞭 slideUp() 方法：


 



<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".flip").click(function(){
    $(".panel").slideUp("slow");
  });
});
</script>p.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
p.panel
{
height:120px;
}


W3School – 領先的 Web 技術教程站點


在 W3School，你可以找到你所需要的所有網站建設教程。


請點擊這裡




3、jQuery slideToggle() 方法


jQuery slideToggle() 方法可以在 slideDown() 與 slideUp() 方法之間進行切換。如果元素向下滑動，則 slideToggle() 可向上滑動它們。如果元素向上滑動，則 slideToggle() 可向下滑動它們。


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


可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。可選的 callback 參數是滑動完成後所執行的函數名稱。


下面的例子演示瞭 slideToggle() 方法：


 



<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
    $(".panel").slideToggle("slow");
  });
});
</script>p.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
p.panel
{
height:120px;
display:none;
}


W3School – 領先的 Web 技術教程站點


在 W3School，你可以找到你所需要的所有網站建設教程。


請點擊這裡




 


三、動畫


1、jQuery 動畫 – animate() 方法


jQuery animate() 方法用於創建自定義動畫。


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


必需的 params 參數定義形成動畫的 CSS 屬性。


可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。


可選的 callback 參數是動畫完成後所執行的函數名稱。


下面的例子演示 animate() 方法的簡單應用；它把


元素移動到左邊，直到 left 屬性等於 250 像素為止：


 



<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").animate({left:'250px'});
  });
});
</script>


默認情況下，所有 HTML 元素的位置都是靜態的，並且無法移動。如需對位置進行操作，記得首先把元素的 CSS position 屬性設置為 relative、fixed 或 absolute。


 






 


提示：默認地，所有 HTML 元素都有一個靜態位置，且無法移動。如需對位置進行操作，要記得首先把元素的 CSS position 屬性設置為 relative、fixed 或 absolute！


 


2、jQuery animate() – 操作多個屬性


請註意，生成動畫的過程中可同時使用多個屬性：


 



<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").animate({
      left:'250px',
      opacity:'0.5',
      height:'150px',
      width:'150px'
    });
  });
});
</script>


默認情況下，所有 HTML 元素的位置都是靜態的，並且無法移動。如需對位置進行操作，記得首先把元素的 CSS position 屬性設置為 relative、fixed 或 absolute。


 




提示：可以用 animate() 方法來操作所有 CSS 屬性，不過，需要記住一件重要的事情：當使用 animate() 時，必須使用 Camel 標記法書寫所有的屬性名，比如，必須使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。同時，色彩動畫並不包含在核心 jQuery 庫中。如果需要生成顏色動畫，您需要從 jQuery.com 下載 Color Animations 插件。


3、jQuery animate() – 使用相對值


也可以定義相對值（該值相對於元素的當前值）。需要在值的前面加上 += 或 -=：


 



<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").animate({
      left:'250px',
      height:'+=150px',
      width:'+=150px'
    });
  });
});
</script>


默認情況下，所有 HTML 元素的位置都是靜態的，並且無法移動。如需對位置進行操作，記得首先把元素的 CSS position 屬性設置為 relative、fixed 或 absolute。


 






 


4、jQuery animate() – 使用預定義的值


您甚至可以把屬性的動畫值設置為 "show"、"hide" 或 "toggle"：


 



<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").animate({
      height:'toggle'
    });
  });
});
</script>


默認情況下，所有 HTML 元素的位置都是靜態的，並且無法移動。如需對位置進行操作，記得首先把元素的 CSS position 屬性設置為 relative、fixed 或 absolute。


 




 


5、jQuery animate() – 使用隊列功能


默認地，jQuery 提供針對動畫的隊列功能。這意味著如果您在彼此之後編寫多個 animate() 調用，jQuery 會創建包含這些方法調用的“內部”隊列。然後逐一運行這些 animate 調用。


實例：如果您希望在彼此之後執行不同的動畫，那麼我們要利用隊列功能


 



<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    var p=$("p");
    p.animate({height:'300px',opacity:'0.4'},"slow");
    p.animate({width:'300px',opacity:'0.8'},"slow");
    p.animate({height:'100px',opacity:'0.4'},"slow");
    p.animate({width:'100px',opacity:'0.8'},"slow");
  });
});
</script>


默認情況下，所有 HTML 元素的位置都是靜態的，並且無法移動。如需對位置進行操作，記得首先把元素的 CSS position 屬性設置為 relative、fixed 或 absolute。


 






 


 


四、停止動畫


jQuery stop() 方法用於停止動畫或效果，在它們完成之前。stop() 方法適用於所有 jQuery 效果函數，包括滑動、淡入淡出和自定義動畫。


語法：$(selector).stop(stopAll,goToEnd);


可選的 stopAll 參數規定是否應該清除動畫隊列。默認是 false，即僅停止活動的動畫，允許任何排入隊列的動畫向後執行。


可選的 goToEnd 參數規定是否立即完成當前動畫。默認是 false。


因此，默認地，stop() 會清除在被選元素上指定的當前動畫。


下面的例子演示 stop() 方法，不帶參數：


 



<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown(5000);
  });
  $("#stop").click(function(){
    $("#panel").stop();
  });
});
</script>#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}


點擊這裡，向下滑動面板


Hello world!






 


 


五、Chaining


通過 jQuery，可以把動作/方法鏈接起來。Chaining 允許我們在一條語句中允許多個 jQuery 方法（在相同的元素上）。


直到現在，我們都是一次寫一條 jQuery 語句（一條接著另一條）。不過，有一種名為鏈接（chaining）的技術，允許我們在相同的元素上運行多條 jQuery 命令，一條接著另一條。提示：這樣的話，瀏覽器就不必多次查找相同的元素。


如需鏈接一個動作，您隻需簡單地把該動作追加到之前的動作上。


例子1、下面的例子把 css(), slideUp(), and slideDown() 鏈接在一起。"p1" 元素首先會變為紅色，然後向上滑動，然後向下滑動：


 






<script src=”/jquery/jquery-1.11.1.min.js”></script><script>

$(document).ready(function()

  {

  $(“button”).click(function(){

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

  });

});

</script>


jQuery 樂趣十足！




 


如果需要，我們也可以添加多個方法調用。提示：當進行鏈接時，代碼行會變得很差。不過，jQuery 在語法上不是很嚴格；您可以按照希望的格式來寫，包含折行和縮進。


例子2、這樣寫也可以運行：


 




<script src=”/jquery/jquery-1.11.1.min.js”></script><script>

$(document).ready(function()

  {

  $(“button”).click(function(){

    $(“#p1”).css(“color”,”red”)

      .slideUp(2000)

      .slideDown(2000);

  });

});

</script>


jQuery 樂趣十足！




 


jQuery 會拋掉多餘的空格，並按照一行長代碼來執行上面的代碼行。


						





Related posts:
    

  1. JS_動畫 
    2. 

  2. Vuejs——（7）過渡（動畫） 
    3. 

  3. AngularJS動畫 
    4. 

  4. jQuery動畫用法及實現教程 
    5. 

  5. JQuery動畫和停止動畫實例代碼 
    6. 

  6. 基於JQuery 滑動與動畫的說明介紹 
    7. 

  7. js控制css中的幀動畫，使動畫每點擊一次運行一次（代碼實例） 
    8. 

  8. jQuery下的動畫處理總結 
    9. 




	


	






	
	
		

		
發佈留言 
發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *