บทช่วยสอน ตัวอย่าง UI jQuery - เพิ่มระดับชั้น (เพิ่มระดับชั้น) ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ .addClass () การสาธิต,
เมื่อมีการเปลี่ยนแปลงรูปแบบการเคลื่อนไหวสำหรับองค์ประกอบของชุดขององค์ประกอบจับคู่ภายในแต่ละเพิ่มระดับที่กำหนด
สำหรับข้อมูลเพิ่มเติมเกี่ยว .addClass()
รายละเอียดของวิธีการดูเอกสาร API .addClass ()
คลิกที่ปุ่มเพื่อดูตัวอย่างผลกระทบ
<! Doctype html> <html lang = "th"> <head> <Meta charset = "UTF-8"> <title> jQuery UI ผลกระทบ - .addClass () สาธิต </ 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; padding: 1em; font-size: 1.2em; ชายแดน: 1px ของแข็ง # 000; พื้นหลัง: #eee; color: # 333;} .newClass {text-เยื้อง: 40px; ตัวอักษรระยะห่าง: .4em ความกว้าง: 410px; ความสูง: 100px; padding: 30px; margin: 10px; font-size: 1.6em;} </ style> <script> $ (ฟังก์ชั่น () { $ ( "#button") จำนวนคลิก (ฟังก์ชั่น () { $ ( "#effect") .addClass ( "NewClass" 1000 โทรกลับ); กลับเท็จ; }); ฟังก์ชั่นการโทรกลับ () { setTimeout (ฟังก์ชั่น () { $ ( "#effect") .removeClass ( "NewClass"); } 1500); } }); </ script> </ head> <body> <div class = "toggler"> <div id = "ผล" class = "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>