jQuery UI API - .toggleClass ()

ถัดไป: API jQuery UI - ผลกระทบการถ่ายโอน (การถ่ายโอน)

หมวดหมู่

เทคนิคพิเศษ (ผลกระทบ) | ผลกระทบหลัก (หลักผลกระทบ) | วิธีการบรรทุกเกินพิกัด (วิธีการแทนที่)

การใช้

คำอธิบาย: เมื่อมีการเปลี่ยนแปลงรูปแบบการเคลื่อนไหวตามการดำรงอยู่ระดับและค่าพารามิเตอร์ของสวิทช์ที่อยู่ในชุดขององค์ประกอบการจับคู่ของแต่ละองค์ประกอบเพื่อเพิ่มหรือลบหนึ่งหรือระดับมากขึ้น

ผลตอบแทน: jQuery

.toggleClass( className [, switch ] [, duration ] [, easing ] [, complete ] )

参数	类型	描述	默认值
ClassName	String	为匹配的元素集合中的每个元素要切换的一个或多个 class 名称，多个 class 名称用空格分隔。
switch	Boolean	一个布尔值，指定 class 应被添加还是被移除。
duration	Number 或 String	一个字符串或一个数字，指定动画将运行多久。	400
easing	String	一个字符串，指示要使用的 easing 函数。	swing
complete	Function()	一旦动画完成时要调用的函数。

.toggleClass( className [, switch ] [, options ] )

参数	类型	描述
ClassName	String	为匹配的元素集合中的每个元素要切换的一个或多个 class 名称，多个 class 名称用空格分隔。
switch	Boolean	一个布尔值，指定 class 应被添加还是被移除。
options	Object	所有的动画设置。所有的属性是可选的。 duration （默认值： `400` ）类型：Number 或 String 描述：一个字符串或一个数字，指定动画将运行多久。 easing （默认值： `swing` ）类型：String 描述：一个字符串，指示要使用的 easing 函数。 complete 类型：Function() 描述：一旦动画完成时要调用的函数。 children （默认值： `false` ）类型：Boolean 描述：指定动画是否被应用到匹配元素的所有后代。此功能应慎重使用，因为判断元素是否是动画的后代的代价是很大的，会根据后代的数量线性增长。 queue （默认值： `true` ）类型：Boolean 或 String 描述：一个布尔值，指示是否将动画放在特效队列中。如果是 false，动画将立即开始。自 jQuery 1.7 起，queue 选项也接受一个字符串，在这种情况下，动画添加到由字符串表示的队列中。

การเปลี่ยนแปลงที่คล้ายกับ CSS พื้นเมืองระดับภาพเคลื่อนไหว jQuery UI การให้ราบรื่นจากรัฐหนึ่งไปสู่สถานะของการเปลี่ยนแปลงอีกขณะที่มั่นใจว่าทุกรายละเอียดของการเปลี่ยนแปลงรูปแบบจะทำผ่านทาง CSS โดยไม่ต้องใช้ JavaScript ภาพเคลื่อนไหวระดับทั้งหมดประกอบด้วย .toggleClass() ช่วยให้ระยะเวลาที่กำหนดเองของภาพเคลื่อนไหวและ บรรเทา ฟังก์ชั่นนิเมชั่นเสร็จสมบูรณ์นอกจากนี้ยังมีการติดต่อกลับ

รูปแบบที่ไม่ได้ทั้งหมดสามารถเคลื่อนไหวที่จะเพิ่ม ยกตัวอย่างเช่นภาพพื้นหลังภาพเคลื่อนไหว ไม่ใช่สไตล์ภาพเคลื่อนไหวใด ๆ ที่จะเปลี่ยนเมื่อหนังจบ

นามสกุล Plug-in จาก jQuery สร้าง .toggleClass () วิธีการ หาก jQuery UI ไม่โหลดโทร .toggleClass() วิธีการไม่เพียงล้มเหลวเพราะวิธีการที่มีอยู่ใน jQuery แต่ก็ไม่ได้คาดว่าจะเกิด

ตัวอย่าง

เพื่อให้ตรงกับการเปลี่ยนองค์ประกอบระดับ "บิ๊กสีฟ้า"

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> .toggleClass () สาธิต </ title>
  <link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <style>
  div {
    ความกว้าง: 100px;
    ความสูง: 100px;
    สีพื้นหลัง: # CCC;
  }
  .big ฟ้า {
    ความกว้าง: 200px;
    ความสูง: 200px;
    สีพื้นหลัง: # 00f;
  }
  </ style>
  <script src = "// code.jquery.com/jquery-1.10.2.js"> </ script>
  <script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ head>
<body>
 
<div> </ div>
 
<script>
$ ( "Div") จำนวนคลิก (ฟังก์ชั่น () {
  $ (นี้) .toggleClass ( "บิ๊กสีฟ้า" 1000 "easeOutSine");
});
</ script>
 
</ body>
</ html>

ก่อนหน้านี้: jQuery UI API - .toggle ()

ถัดไป: API jQuery UI - ผลกระทบการถ่ายโอน (การถ่ายโอน)

jQuery UI หลักสูตร

jQuery UI กระทู้

jQuery UI ห้องสมุดองค์ประกอบ

jQuery UI คู่มืออ้างอิง

jQuery UI ตัวอย่าง

jQuery UI API - .toggleClass ()

หมวดหมู่

การใช้

ตัวอย่าง