ล่าสุดการพัฒนาเว็บบทเรียน
 

jQueryเอฟเฟค - นิเมชั่น

❮ก่อนหน้า ถัดไปบท❯

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



jQuery

jQuery นิเมชั่น - เดอะ animate() วิธี

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

ไวยากรณ์:

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

พารามิเตอร์ params ต้องกำหนดคุณสมบัติ CSS ที่จะเคลื่อนไหว

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

พารามิเตอร์โทรกลับตัวเลือกเป็นหน้าที่ที่จะต้องดำเนินการหลังจากเสร็จสิ้นการเคลื่อนไหว

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้งานที่เรียบง่ายของ animate() วิธีการ; มันย้าย <div> องค์ประกอบไปทางขวาจนกว่าจะได้มาถึงสถานที่ให้บริการทางด้านซ้ายของ 250px:

ตัวอย่าง

$("button").click(function(){
    $("div").animate({left: '250px'});
}); 
ลองตัวเอง»

โดยค่าเริ่มต้นองค์ประกอบ HTML ทั้งหมดมีตำแหน่งที่คงที่และไม่สามารถเคลื่อนย้ายได้
เพื่อจัดการกับตำแหน่งจำครั้งแรกกำหนดตำแหน่ง CSS คุณสมบัติขององค์ประกอบที่จะ relative, fixed หรือ absolute !

jQuery animate() - จัดการหลายคุณสมบัติ

ขอให้สังเกตว่าหลายคุณสมบัติสามารถเคลื่อนไหวในเวลาเดียวกัน:

ตัวอย่าง

$("button").click(function(){
    $("div").animate({
        left: '250px',
        opacity: '0.5',
        height: '150px',
        width: '150px'
    });
}); 
ลองตัวเอง»

มันเป็นไปได้ที่จะจัดการกับ CSS คุณสมบัติทั้งหมดที่มี animate() วิธี?

ใช่เกือบ! แต่มีสิ่งหนึ่งที่สำคัญที่ต้องจำไว้: ชื่อคุณสมบัติทั้งหมดจะต้องมีอูฐดาดเมื่อใช้ร่วมกับ animate() วิธีการ: คุณจะต้องเขียน paddingLeft แทน padding-left, marginRight แทน margin-right และอื่น ๆ

นอกจากนี้นิเมชั่นสีที่ไม่ได้รวมอยู่ในห้องสมุดหลัก jQuery
หากคุณต้องการให้เคลื่อนไหวสีคุณต้องดาวน์โหลด ปลั๊กอินสีภาพเคลื่อนไหว จาก jQuery.com

jQuery animate() - ใช้ค่าสัมพัทธ์

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

ตัวอย่าง

$("button").click(function(){
    $("div").animate({
        left: '250px',
        height: '+=150px',
        width: '+=150px'
    });
}); 
ลองตัวเอง»

jQuery animate() - ใช้ค่าที่กำหนดไว้ล่วงหน้า

คุณยังสามารถระบุค่านิเมชั่นของโรงแรมเป็น "show", "hide" หรือ "toggle" :

ตัวอย่าง

$("button").click(function(){
    $("div").animate({
        height: 'toggle'
    });
}); 
ลองตัวเอง»

jQuery animate() - การใช้ฟังก์ชั่นคิว

โดยค่าเริ่มต้น jQuery มาพร้อมกับฟังก์ชั่นคิวสำหรับภาพเคลื่อนไหว

ซึ่งหมายความว่าถ้าคุณเขียนหลาย animate() เรียกหลังจากที่แต่ละอื่น ๆ 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> ไปทางขวาแล้วเพิ่มขนาดตัวอักษรของข้อความ:

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

$("button").click(function(){
    var div = $("div");
    div.animate({left: '100px'}, "slow");
    div.animate({fontSize: '3em'}, "slow");
}); 
ลองตัวเอง»

ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!

การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 » 4 การออกกำลังกาย»

jQuery ผลกระทบการอ้างอิง

สำหรับภาพรวมที่สมบูรณ์ของทุกผลกระทบ jQuery โปรดไปที่เรา ผลอ้างอิง jQuery


❮ก่อนหน้า ถัดไปบท❯