บทช่วยสอน jQuery UI ตัวอย่าง - สีนิเมชั่น (สีนิเมชั่น) ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ อะนิเมะ (Animation) การสาธิต,
ใช้ .animate () เพื่อให้บรรลุนิเมชั่นสี
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับแอนิเมชั่สี (สีนิเมชั่น) ดูรายละเอียดจากเอกสาร API นิเมชั่นสี (สีนิเมชั่น)
jQuery UI ที่มาพร้อมปลั๊กอิน jQuery สีปลั๊กอิน jQuery สีให้ภาพเคลื่อนไหวสีและสีอื่น ๆ ที่เกี่ยวข้องหลายฟังก์ชั่นยูทิลิตี้
คลิกที่ปุ่มเพื่อดูตัวอย่างผลกระทบ
<! Doctype html> <html lang = "th"> <head> <Meta charset = "UTF-8"> <title> jQuery UI ผลกระทบ - นิเมชั่น (Animation) สาธิต </ title> <link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src = "// code.jquery.com/jquery-1.9.1.js"> </ script> <script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> <link rel = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css"> <style> .toggler {กว้าง: 500px; ความสูง: 200px; ตำแหน่ง: ญาติ;} #button {padding: .5em 1em; ตกแต่งข้อความ: none;} #effect {กว้าง: 240px; ความสูง: 135px; padding: 0.4em; ตำแหน่ง: ญาติ; พื้นหลัง: # fff;} #effect h3 {margin: 0; padding: 0.4em; text-align: ศูนย์;} </ style> <script> $ (ฟังก์ชั่น () { รัฐ var = true; $ ( "#button") จำนวนคลิก (ฟังก์ชั่น () { ถ้า (รัฐ) { $ ( "#effect") .animate ({ BackgroundColor: "# aa0000" สี: สี "# fff" ความกว้าง: 500 }, 1000) } else { $ ( "#effect") .animate ({ BackgroundColor: "# fff" สี: สี "# 000" ความกว้าง: 240 }, 1000) } รัฐ = รัฐ !; }); }); </ script> </ head> <body> <div class = "toggler"> <div id = "ผล" class = "UI-Widget เนื้อหา UI-มุมทั้งหมด"> <ระดับ H3 = "UI-Widget หัว UI-มุมทั้งหมด"> อะนิเมะ (Animation) </ h3> <p> Etiam Libero วัด, luctus ที่ eleifend NEC, Semper AT, Lorem. Sed กะเทย. Nulla Lorem Metus, adipiscing UT, luctus sed, สำนัก Vitae, มิชิแกน </ p> </ div> </ div> <a href="#" id="button" class="ui-state-default ui-corner-all"> ผลกระทบสลับ </a> </ body> </ html>