jQuery UI API - สีนิเมชั่น (สีนิเมชั่น)
jQuery UI หลักเพิ่มเทคนิคพิเศษโดยใช้ rgb()
, rgba()
ค่าเลขฐานสิบหกหรือชื่อสีเช่น "aqua"
เพื่อเปลี่ยนแอตทริบิวต์สีฟังก์ชั่นแบบไดนามิก เพียง แต่คุณต้องรวมไฟล์ jQuery UI ผลกระทบหลัก .animate()
จะให้การสนับสนุนสี
มันสนับสนุนคุณสมบัติดังต่อไปนี้:
-
backgroundColor
-
borderBottomColor
-
borderLeftColor
-
borderRightColor
-
borderTopColor
-
color
-
columnRuleColor
-
outlineColor
-
textDecorationColor
-
textEmphasisColor
การสนับสนุนสำหรับการเคลื่อนไหวสีจาก ปลั๊กอิน jQuery สี สี plug-in ที่ให้จำนวนของฟังก์ชั่นสี เพื่อดูเอกสารทั้งหมดแวะไปที่ เอกสาร jQuery สี
นิเมชั่นชั้น (Class ภาพเคลื่อนไหว)
แม้ว่ามันจะเป็นไปได้ที่จะเคลื่อนไหวคุณลักษณะสีโดยตรง แต่วิธีทางเลือกมักจะดีกว่าที่มีรูปแบบในชั้นเรียนของ jQuery UI การมีวิธีการที่จะเพิ่มแบบไดนามิกหรือลบคลาส CSS คือ .addClass()
, .removeClass()
, .toggleClass()
และ .switchClass()
วิธีการเหล่านี้โดยอัตโนมัติจะเป็นตัวกำหนดคุณสมบัติที่ต้องมีการเปลี่ยนแปลงและสิ่งที่จำเป็นต้องใช้การเคลื่อนไหวที่เหมาะสม
ตัวอย่าง
<! Doctype html> <html lang = "th"> <head> <Meta charset = "UTF-8"> <title> สีนิเมชั่น (Animation สี) สาธิต </ title> <link rel = "สไตล์ชีต" href = "http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <style> #elem { color: # 006; สีพื้นหลัง: #aaa; font-size: 25 พิกเซล; padding: 1em; text-align: ศูนย์; } </ style> <script src = "http://code.jquery.com/jquery-1.10.2.js"> </ script> <script src = "http://code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> </ head> <body> <div id = "ELEM"> สีนิเมชั่น </ div> <ปุ่ม id = "สลับ"> เปลี่ยนสี </ ปุ่ม> <script> $ ( "#toggle") จำนวนคลิก (ฟังก์ชั่น () { $ ( "#elem") .animate ({ สี: สี "สีเขียว" BackgroundColor: "rgb (20, 20, 20)" }); }); </ script> </ body> </ html>