ตัวอย่าง UI jQuery - คลาสแปลง (สวิทช์ class)
เมื่อมีการเปลี่ยนแปลงรูปแบบภาพเคลื่อนไหวภายในชุดขององค์ประกอบที่ตรงกันเพื่อเพิ่มและลบองค์ประกอบของคลาสที่ระบุในแต่ละ
สำหรับข้อมูลเพิ่มเติมเกี่ยว .switchClass() รายละเอียดของวิธีการดูเอกสาร API .switchClass ()
.switchClass () การสาธิต
คลิกที่ปุ่มเพื่อดูตัวอย่างผลกระทบ
<! Doctype html>
<html lang = "th">
<head>
<Meta charset = "UTF-8">
<title> jQuery UI ผลกระทบ - .switchClass () สาธิต </ 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 {ตำแหน่ง: ญาติ;}
.newClass {กว้าง: 240px; padding: 1em; ตัวอักษรระยะห่าง: 0; font-size: 1.2em; margin: 0;}
.anotherNewClass {text-เยื้อง: 40px; ตัวอักษรระยะห่าง: .4em ความกว้าง: 410px; ความสูง: 100px; padding: 30px; margin: 10px; font-size: 1.6em;}
</ style>
<script>
$ (ฟังก์ชั่น () {
$ ( "#button") จำนวนคลิก (ฟังก์ชั่น () {
$ ( ".newClass") .switchClass ( "NewClass", "anotherNewClass", 1000)
$ ( ".anotherNewClass") .switchClass ( "AnotherNewClass", "NewClass", 1000)
กลับเท็จ;
});
});
</ script>
</ head>
<body>
<div class = "toggler">
<div id = "ผล" class = "NewClass UI-มุมทั้งหมด">
Etiam Libero วัด, luctus ที่ eleifend NEC, Semper AT, Lorem. Sed กะเทย
</ div>
</ div>
<a href="#" id="button" class="ui-state-default ui-corner-all"> เรียกผลกระทบ </a>
</ body>
</ html>