jQuery Animation Method : สอน method และ property ของ Animation Method, เรียน method และ property ของ Animation Method
 

Reference

Reference ในเว็บไซต์ Function.in.th เป็นการนำเสนอความรู้ในรูปแบบของแหล่งอ้างอิงของคำสั่งต่าง ๆ ที่ใช้ในการเขียนโปรแกรม โดยผู้ที่สนใจสามารถเข้ามาเรียนรู้การใช้งานคำสั่งของการเขียนโปรแกรมเหล่านี้ได้ ผ่านทาง URL code.function.in.th ทั้งนี้ผู้อ่านยังสามารถร่วมแสดงความคิดเห็นบนเนื้อหาที่มีสอนได้ ซึ่งถือเป็นการส่งเสริมให้มีการแลกเปลี่ยนประสบการณ์และความรู้ระหว่างผู้อ่านด้วยกันเอง
  • hide ( speed [, callback] ) ใช้กำหนดให้ ทุก element ภายใน set ถูกซ่อน
    show ( speed [, callback] ) ใช้กำหนดให้ ทุก element ภายใน set ถูกแสดงขึ้นมา จากการถูกซ่อน
    toggle ( speed [, callback] ) ใช้กำหนดให้ ทุก element ภายใน set ถูกซ่อนหรือถูกแสดงขึ้นมา
    fadeOut ( speed [, callback] ) ใช้กำหนดให้ ทุก element ภายใน set ถูก remove ออกจาก page
    fadeIn ( speed [, callback] ) ใช้กำหนดให้ ทุก element ภายใน set ที่ถูกซ่อนอยู่ แสดงขึ้นมาบน page
    fadeTo ( speed, opacity [, callback] ) ใช้ปรับ Opacity ของ ทุก element ภายใน set ให้เป็นตามที่กำหนด และมีความเร็วตามที่กำหนด
    slideDown ( speed [,callback] ) ใช้กำหนดให้ ทุก element ใน set ที่ถูกซ่อนอยู่ แสดงขึ้นมา
    slideUp ( speed [,callback] ) ใช้กำหนดให้ ทุก element ใน set ที่ถูกแสดงอยู่ ให้ซ่อนลง
    slideToggle ( speed [,callback] ) ใช้กำหนดให้ ทุก element ใน set ถูกซ่อนหรือถูกแสดง
    animate ( properties [, duration [, easing [, callback ] ] ] ) ใช้กำหนด ให้เกิดการเคลื่อนไหว แบบ animation
    animate ( properties, options ) ใช้กำหนด ให้เกิดการเคลื่อนไหว แบบ animation
    delay ( duration, [ queueName ] ) ใช้กำหนดเวลาหน่วงของการเล่น animation ของ ทุก element ภายใน set
    queue ( [ queueName ] ) ใช้คืนค่า queue function ของ queue ที่กำหนด ของ first element ภายใน set
    queue ( [ queueName ], arrayQueueFunction ) ใช้กำหนด queue function ให้กับ ทุก element ภายใน set
    queue( [ queueName ], function ( next ) ) ใช้กำหนด queue function ให้กับ ทุก element ภายใน set
    clearQueue ( [ queueName ] ) ใช้ยกเลิก queue function ทั้งหมด ของทุก element ภายใน set
    dequeue ( [ queueName ] ) ใช้สั่งให้ queue funtion ปัจจุบัน ของทุก element ภายใน set ทำงาน
    stop () ใช้ หยุด การทำงานของ animate ของ ทุก element ภายใน set
    stop ( [ clearQueue ] ) ใช้ หยุด การทำงานของ animate ของ ทุก element ภายใน set
  • syntax :
    hide ( speed [, callback] )

    return type :
    void, element

    content :
    ใช้กำหนดให้ ทุก element ภายใน set ถูกซ่อน
    โดย speed ใช้กำหนดความเร็วหน่วย millisecond และมี keyword เช่น slow, normal, fast
    และ callback จะเป็น function ที่ถูกเรียกใช้งานเมื่อ animated complete
    ( เป็นการทำให้ display: none )

    example :
    $("div").hide("slow", function(){
    	alert( "hide complete." );
    }):

  • syntax :
    show ( speed [, callback] )

    return type :
    void, element

    content :
    ใช้กำหนดให้ ทุก element ภายใน set ถูกแสดงขึ้นมา จากการถูกซ่อน
    โดย speed ใช้กำหนดความเร็วหน่วย millisecond และมี keyword เช่น slow, normal, fast
    และ callback จะเป็น function ที่ถูกเรียกใช้งานเมื่อ animated complete
    ( เป็นการทำให้ display: block หรือ display: inline )

    example :
    $("div").show("slow", function(){
    	alert( "hide complete." );
    }):

  • syntax :
    toggle ( speed [, callback] )

    return type :
    void, element

    content :
    ใช้กำหนดให้ ทุก element ภายใน set ถูกแสดงขึ้นมา ในกรณีที่ถูกซ่อนอยู่
    และกำหนดให้ ทุก element ภายใน set ถูกซ่อน ในกรณีที่ถูกแสดงอยู่
    
    โดย speed ใช้กำหนดความเร็วหน่วย millisecond และมี keyword เช่น slow, normal, fast
    และ callback จะเป็น function ที่ถูกเรียกใช้งานเมื่อ animated complete

    example :
    $("div").toggle("slow", function(){
    	alert( "complete." );
    }):

  • syntax :
    fadeOut ( speed [, callback] )

    return type :
    void, element

    content :
    ใช้กำหนดให้ ทุก element ภายใน set ถูก remove ออกจาก page
    โดยวิธีการคือ จะค่อยๆปรับ Opacity ให้เหลือ 0 แล้วลบออกจาก page
    
    โดย speed ใช้กำหนดความเร็วหน่วย millisecond และมี keyword เช่น slow, normal, fast
    และ callback จะเป็น function ที่ถูกเรียกใช้งานเมื่อ animated complete

    example :
    $("div").fadeOut("slow", function(){
    	alert( "complete." );
    }):

  • syntax :
    fadeIn ( speed [, callback] )

    return type :
    void, element

    content :
    ใช้กำหนดให้ ทุก element ภายใน set ที่ถูกซ่อนอยู่ แสดงขึ้นมาบน page
    โดยวิธีการคือ จะค่อยๆปรับ Opacity ให้เป็น 100
    
    โดย speed ใช้กำหนดความเร็วหน่วย millisecond และมี keyword เช่น slow, normal, fast
    และ callback จะเป็น function ที่ถูกเรียกใช้งานเมื่อ animated complete

    example :
    $("div").fadeIn("slow", function(){
    	alert( "complete." );
    }):

  • syntax :
    fadeTo ( speed, opacity [, callback] )

    return type :
    void, element

    content :
    ใช้ปรับ Opacity ของ ทุก element ภายใน set ให้เป็นตามที่กำหนด และมีความเร็วตามที่กำหนด
    โดย speed ใช้กำหนดความเร็วหน่วย millisecond และมี keyword เช่น slow, normal, fast
    และ opacity คือค่าที่ต้องการให้เป็น ซึ่งมีค่าอยู่ระหว่าง 0.0 ถึง 1.0
    และ callback จะเป็น function ที่ถูกเรียกใช้งานเมื่อ animated complete

    example :
    $("div").fadeTo("slow", 0.5, function(){
    	alert( "complete." );
    }):

  • syntax :
    slideDown ( speed [,callback] )

    return type :
    void, element

    content :
    ใช้กำหนดให้ ทุก element ใน set ที่ถูกซ่อนอยู่ แสดงขึ้นมา
    โดยจะค่อยๆแสดงขึ้นมาในลักษณะของ slide down
    โดย speed ใช้กำหนดความเร็วหน่วย millisecond และมี keyword เช่น slow, normal, fast
    และ callback จะเป็น function ที่ถูกเรียกใช้งานเมื่อ animated complete

    example :
    $("div").slideDown("slow", function(){
    	alert( "complete." );
    }):

  • syntax :
    slideUp ( speed [,callback] )

    return type :
    void, element

    content :
    ใช้กำหนดให้ ทุก element ใน set ที่ถูกแสดงอยู่ ให้ซ่อนลง
    โดยจะค่อยๆซ่อนลงไปในลักษณะของ slide up
    โดย speed ใช้กำหนดความเร็วหน่วย millisecond และมี keyword เช่น slow, normal, fast
    และ callback จะเป็น function ที่ถูกเรียกใช้งานเมื่อ animated complete

    example :
    $("div").slideUp("slow", function(){
    	alert( "complete." );
    }):

  • syntax :
    slideToggle ( speed [,callback] )

    return type :
    void, element

    content :
    ใช้กำหนดให้ ทุก element ใน set ที่ถูกซ่อนอยู่ แสดงขึ้นมา ในลักษณะ slide down
    และกำหนดให้ ทุก element ใน set ที่ถูกแสดงอยู่ ให้ซ่อนลง ในลักษณะ slide up
    โดย speed ใช้กำหนดความเร็วหน่วย millisecond และมี keyword เช่น slow, normal, fast
    และ callback จะเป็น function ที่ถูกเรียกใช้งานเมื่อ animated complete

    example :
    $("div").slideToggle("slow", function(){
    	alert( "complete." );
    }):

  • syntax :
    animate ( properties [, duration [, easing [, callback ] ] ] )

    return type :
    void, element

    content :
    ใช้กำหนด ให้เกิดการเคลื่อนไหว แบบ animation
    โดย properties ให้กำหนด ลักษณะของ css ที่ต้องการให้เป็นไป
    โดย duration ใช้กำหนดความเร็วหน่วย millisecond และมี keyword เช่น slow, normal, fast
    และ callback จะเป็น function ที่ถูกเรียกใช้งานเมื่อ animated complete

    example :
    $("#test").each( function() {
    	$(this).animate( {
    		width: $(this).width() + 200,
    		height: $(this).height() + 300
    	}, 2000);
    });
    $("#button").click ( function ( ) {
      $("div#animate").animate( { "left" : "+=50px" }, "slow" );
    });
    
    $("#button").click ( function ( ) {
    	$("div#animate").animate( { 
    		width: "70%",
    		opacity: 0.4,
    		marginLeft: "0.6in",
    		fontSize: "3em", 
    		borderWidth: "10px"
      	}, 1500 );
    });
    
    $("#button").click ( function ( ) {
      	$("div#animate").animate ( {
    		width: "toggle",
    		height: "toggle"
    	}, 3000 );
    });
    
    $("#button").click( function ( ) {
    	$("div#animate").animate( {
    		width: ["toggle", "swing"],
    		height: ["toggle", "swing"],
    		opacity: "toggle"
    	}, 2000
    	, "linear"
    	, function ( ) {
          		alert ("Animation complete.");
      	});
    });

  • syntax :
    animate ( properties, options )

    return type :
    void, element

    content :
    ใช้กำหนด ให้เกิดการเคลื่อนไหว แบบ animation
    โดย properties ให้กำหนด ลักษณะของ css ที่ต้องการให้เป็นไป
    และ options ใช้กำหนด object ซึ่งเป็นค่า config ต่างๆ ได้แก่ 
    duration ใช้กำหนดความเร็วหน่วย millisecond และมี keyword เช่น slow, normal, fast, 
    complete จะเป็น function ที่ถูกเรียกใช้งานเมื่อ animated complete, 
    queue ถ้ากำหนด false หมายถึง จะไม่รอ queue คือจะเริ่มแสดง animation ทันที

    example :
    $("#test").each( function() {
    	$(this).animate( {
    		width: $(this).width() + 200,
    		height: $(this).height() + 300
    	}, { duration: 2000 } );
    });
    $("#button").click ( function ( ) {
    	$("div#animate").animate( { "left" : "+=50px" }, , { duration : "slow" } ); );
    });
    
    $("#button").click ( function ( ) {
    	$("div#animate").animate( { 
    		width: "70%",
    		opacity: 0.4,
    		marginLeft: "0.6in",
    		fontSize: "3em", 
    		borderWidth: "10px"
      	}, { duration : 1500 } );
    });
    
    $("#button").click ( function ( ) {
      	$("div#animate").animate ( {
    		width: "toggle",
    		height: "toggle"
    	}, { duration : 3000 } );
    });
    
    $("#button").click( function ( ) {
    	$("div#animate").animate( {
    		width: ["toggle", "swing"],
    		height: ["toggle", "swing"],
    		opacity: "toggle"
    	}, { 
    		duration : 2000,
    		complete : function ( ) {
          			alert ( "Animation complete." );
      	} );
    } );

  • syntax :
    delay ( duration, [ queueName ] )

    return type :
    void, element

    content :
    ใช้กำหนดเวลาหน่วงของการเล่น animation ของ ทุก element ภายใน set

    example :
    $("div#animate").slideUp(500).delay(500).fadeIn(500);

  • syntax :
    queue ( [ queueName ] )

    return type :
    array

    content :
    ใช้คืนค่า queue function ของ queue ที่กำหนด ของ first element ภายใน set
    โดยถ้าไม่กำหนด จะหมายถึง ทุก queue ของ animation
    และคำสั่งต่างๆที่เกี่ยวกับการเคลื่อนไหวจะถือเป็นการทำงานของ animation ด้วย ดังตัวอย่าง

    example :
    $("div#animate").show ( "slow" );
    $("div#animate").animate( { left:"+=200" }, 2000 );
    $("div#animate").animate( { left:"-=200" }, 2000 );
    $("div#animate").hide ( "slow" );
    var queueDiv = $("div#animate").queue ();
    alert ( "Number of Queue : " + queueDiv.length );

  • syntax :
    queue ( [ queueName ], arrayQueueFunction )

    return type :
    void, element

    content :
    ใช้กำหนด queue function ให้กับ ทุก element ภายใน set

    example :
    $("div#animate").queue ( "testQueue", [
    	function ( next ) { $(this).show ( "slow" ); },
    	function ( next ) { $(this).animate ( { left:"+=200" }, 2000 ); },
    	function ( next ) { $(this).animate ( { left:"-=200" }, 2000 ); },
    	function ( next ) { $(this).hide ( "slow" ); }
    ] );
    $("div#animate").dequeue( "testQueue" );
    $("div#animate").dequeue( "testQueue" );
    $("div#animate").dequeue( "testQueue" );
    $("div#animate").dequeue( "testQueue" );

  • syntax :
    queue( [ queueName ], function ( next ) )

    return type :
    void, element

    content :
    ใช้กำหนด queue function ให้กับ ทุก element ภายใน set

    example :
    $("div#animate").queue ( "testQueue", [
    	function ( next ) { $(this).show ( "slow" ); },
    	function ( next ) { $(this).animate ( { left:"+=200" }, 2000 ); },
    	function ( next ) { $(this).animate ( { left:"-=200" }, 2000 ); }
    ] );
    $("div#animate").queue ( "testQueue", function ( next ) { $(this).hide ( "slow" ); } );
    $("div#animate").dequeue( "testQueue" );
    $("div#animate").dequeue( "testQueue" );
    $("div#animate").dequeue( "testQueue" );
    $("div#animate").dequeue( "testQueue" );

  • syntax :
    clearQueue ( [ queueName ] )

    return type :
    void, element

    content :
    ใช้ยกเลิก queue function ทั้งหมด ของทุก element ภายใน set

    example :
    $("div#animate").queue ( "testQueue", [
    	function ( next ) { $(this).show ( "slow" ); },
    	function ( next ) { $(this).animate ( { left:"+=200" }, 2000 ); },
    	function ( next ) { $(this).animate ( { left:"-=200" }, 2000 ); },
    	function ( next ) { $(this).hide ( "slow" ); }
    ] );
    $("div#animate").clearQueue ( "testQueue" );
    var queueDiv = $("div#animate").queue ( "testQueue" );
    alert ( "Number of Queue : " + queueDiv.length );

  • syntax :
    dequeue ( [ queueName ] )

    return type :
    void, element

    content :
    ใช้สั่งให้ queue funtion ปัจจุบัน ของทุก element ภายใน set ทำงาน

    example :
    $("div#animate").queue ( "testQueue", [
    	function ( next ) { $(this).show ( "slow" ); },
    	function ( next ) { $(this).animate ( { left:"+=200" }, 2000 ); },
    	function ( next ) { $(this).animate ( { left:"-=200" }, 2000 ); }
    ] );
    $("div#animate").queue ( "testQueue", function ( next ) { $(this).hide ( "slow" ); } );
    $("div#animate").dequeue( "testQueue" );
    $("div#animate").dequeue( "testQueue" );
    $("div#animate").dequeue( "testQueue" );
    $("div#animate").dequeue( "testQueue" );

  • syntax :
    stop ()

    return type :
    void, element

    content :
    ใช้ หยุด การทำงานของ animate ของ ทุก element ภายใน set

    example :
    $("div").stop();

  • syntax :
    stop ( [ clearQueue ] )

    return type :
    void, element

    content :
    ใช้ หยุด การทำงานของ animate ของ ทุก element ภายใน set
    โดย clearQueue หมายถึงต้องการให้หยุด queue function ด้วย ใช่หรือไม่ ( Default = false )

    example :
    $("div#animate").queue ( "testQueue", [
    	function ( next ) { $(this).show ( "slow" ); },
    	function ( next ) { $(this).animate ( { left:"+=200" }, 2000 ); },
    	function ( next ) { $(this).animate ( { left:"-=200" }, 2000 ); }
    ] );
    $("div#animate").queue ( "testQueue", function ( next ) { $(this).hide ( "slow" ); } );
    $("div#animate").stop ( true );

 
Share This Chapter Login with Facebook