1. Home
  2. ผลกระทบ jQuery - นิเมชั่น

บทช่วยสอน ผลกระทบ jQuery - นิเมชั่น ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ jQuery ภาพเคลื่อนไหว - ภาพเคลื่อนไหว () วิธีการ,ตัวอย่าง,jQuery เคลื่อนไหว () ปฏิบัติการ - คุณสมบัติหลาย,ตัวอย่าง,jQuery เคลื่อนไหว () - ใช้ค่าญาติ,ตัวอย่าง,() เคลื่อนไหว JQuery - ใช้ค่าที่กำหนดไว้ล่วงหน้า,ตัวอย่าง,jQuery เคลื่อนไหว () - การใช้ฟังก์ชั่นคิว,ตัวอย่างที่ 1,ตัวอย่างที่ 2,

ผลกระทบ jQuery - นิเมชั่น

jQuery เคลื่อนไหว () วิธีการช่วยให้คุณสามารถสร้างภาพเคลื่อนไหวแบบกำหนดเอง



jQuery

jQuery ภาพเคลื่อนไหว - ภาพเคลื่อนไหว () วิธีการ

jQuery เคลื่อนไหว (วิธีการ) จะใช้ในการสร้างภาพเคลื่อนไหวแบบกำหนดเอง

ไวยากรณ์:

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

พารามิเตอร์ที่จำเป็น params กำหนดรูปแบบของภาพเคลื่อนไหวคุณสมบัติของ CSS

พารามิเตอร์ตัวเลือกความเร็วในการระบุระยะเวลาของผลกระทบที่ มันอาจจะใช้ค่าต่อไปนี้: "ช้า", "เร็ว" หรือมิลลิวินาที

พารามิเตอร์ตัวเลือกการเรียกกลับเป็นชื่อของฟังก์ชั่นการดำเนินการหลังจากเสร็จสิ้น

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงโปรแกรมที่ง่ายเคลื่อนไหว () วิธีการ มัน <div> ไปทางขวาเพื่อย้าย 250 พิกเซล

ตัวอย่าง

$("button").click(function(){
$("div").animate({left:'250px'});
});

ลอง»

โคมไฟ โดยค่าเริ่มต้นองค์ประกอบ HTML ทั้งหมดมีตำแหน่งที่คงที่และไม่สามารถเคลื่อนย้าย
สำหรับตำแหน่งปฏิบัติการจำแรกองค์ประกอบ CSS ตำแหน่งแอตทริบิวต์การตั้งค่าให้ญาติคงที่หรือแน่นอน!

jQuery เคลื่อนไหว () ปฏิบัติการ - คุณสมบัติหลาย

โปรดทราบว่ากระบวนการของการสร้างภาพเคลื่อนไหวสามารถใช้คุณสมบัติหลาย

ตัวอย่าง

$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});

ลอง»

โคมไฟคุณสามารถเคลื่อนไหว () วิธีการใช้งานคุณลักษณะ CSS ทั้งหมดหรือไม่

ใช่เกือบ! แต่สิ่งสำคัญที่ต้องจำ: เมื่อใช้ชีวิต () เขียนทั้งหมดชื่อแอตทริบิวต์ต้องใช้สัญกรณ์อูฐ, ตัวอย่างเช่นจะต้องนำมาใช้แทน paddingLeft padding ซ้ายแทนการใช้ marginRight ขอบขวา ฯลฯ .

ในเวลาเดียวกัน, ภาพเคลื่อนไหวสีจะไม่รวมอยู่ในห้องสมุดหลัก jQuery

หากคุณจำเป็นต้องสร้างภาพเคลื่อนไหวสีที่คุณต้อง jquery.com ดาวน์โหลด สีภาพเคลื่อนไหว ปลั๊กอิน


jQuery เคลื่อนไหว () - ใช้ค่าญาติ

นอกจากนี้คุณยังสามารถกำหนดค่าสัมพัทธ์ (ค่าเมื่อเทียบกับค่าปัจจุบันขององค์ประกอบ) จำเป็นที่จะต้องนำหน้าค่ากับ + = หรือ -:

ตัวอย่าง

$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});

ลอง»

() เคลื่อนไหว JQuery - ใช้ค่าที่กำหนดไว้ล่วงหน้า

คุณยังสามารถใส่ค่าของการเคลื่อนไหวคุณสมบัติการ "โชว์", "ซ่อน" หรือ "สลับ" ที่:

ตัวอย่าง

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

ลอง»

jQuery เคลื่อนไหว () - การใช้ฟังก์ชั่นคิว

โดยค่าเริ่มต้น jQuery ให้ความสามารถในการจัดคิวสำหรับการเคลื่อนไหว

ซึ่งหมายความว่าถ้าคุณเขียนมากกว่าหนึ่งหลังจากที่อื่นเคลื่อนไหว () โทร jQuery จะสร้างเรียกวิธีการเหล่านี้คิว "ภายใน" จากนั้นหนึ่งโดยหนึ่งในการทำงานเหล่านี้เคลื่อนไหวโทร

ตัวอย่างที่ 1

$("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");
});

ลอง»

ตัวอย่างต่อไปนี้ของ <div> จะถูกย้ายไปขวา 100 พิกเซล, และจากนั้นเพิ่มขนาดของข้อความ:

ตัวอย่างที่ 2

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

ลอง»

บทแนะนำยอดนิยม

Contact US

ผลกระทบ jQuery - นิเมชั่น
10/30