-
-
-
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 );
