jQuery UI ตัวอย่าง - สีนิเมชั่น (สีนิเมชั่น)
ใช้ .animate () เพื่อให้บรรลุนิเมชั่นสี
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับแอนิเมชั่สี (สีนิเมชั่น) ดูรายละเอียดจากเอกสาร API นิเมชั่นสี (สีนิเมชั่น)
jQuery UI ที่มาพร้อมปลั๊กอิน jQuery สีปลั๊กอิน jQuery สีให้ภาพเคลื่อนไหวสีและสีอื่น ๆ ที่เกี่ยวข้องหลายฟังก์ชั่นยูทิลิตี้
อะนิเมะ (Animation) การสาธิต
คลิกที่ปุ่มเพื่อดูตัวอย่างผลกระทบ
<! 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>