Latest web development tutorials

مسج واجهة المستخدم سبيل المثال - التحول من الدرجة (تبديل فئة)

عندما تغير أسلوب الرسوم المتحركة، وفقا لوجود فئة وقيمة المعلمة التبديل ضمن مجموعة من العناصر يقابل كل عنصر لإضافة أو إزالة واحد أو أكثر من فئة.

لمزيد من المعلومات حول .toggleClass() تفاصيل الأساليب، راجع وثائق API .toggleClass () .

.toggleClass () عرض توضيحي

انقر فوق الزر لمعاينة آثار. 

<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
  <محارف ميتا = "UTF-8">
  <عنوان> مسج واجهة المستخدم الأثر - .toggleClass () عرض توضيحي </ عنوان>
  <وصلة يختلط = "أنماط" أ href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <سيناريو SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <سيناريو SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <وصلة يختلط = "أنماط" أ href = "http://jqueryui.com/resources/demos/style.css">
  <نمط>
  .toggler {العرض: 500px؛ الطول: 200px؛ الموقف: النسبية؛}
  #button {الحشو: .5em 1em؛ النص الديكور: لا شيء؛}
  #effect {الموقف: النسبية؛ العرض: 240px؛ الحشو: 1em؛ mso-: 0؛ حجم الخط: 1.2em؛ الحدود: 1PX الصلبة # 000؛ الخلفية: #eee؛ اللون: # 333؛}
  .newClass {نص المسافة البادئة: 40px؛ mso-: .4em، العرض: 410px؛ الطول: 100px؛ الحشو: 30px؛ هامش: 10px؛ حجم الخط: 1.6em؛}
  </ النمط>
  <script>
  $ (وظيفة () {
    $ ( "#button"). انقر (وظيفة () {
      $ ( "#effect") .toggleClass ( "NewClass"، 1000)؛
      عودة كاذبة.
    })؛
  })؛
  </ script>
</ رئيس>
<body>
 
<div الطبقة = "toggler">
  <شعبة معرف = "تأثير" الطبقة = "newClass واجهة المستخدم الزاوية للجميع">
      Etiam يبيرو neque، luctus لذلك، eleifend اللجنة الوطنية للانتخابات، سمبر في، أبجد. الر سد.
  </ div>
</ div>
 
<a href="#" id="button" class="ui-state-default ui-corner-all"> تشغيل آثار </A>
 
 
</ الجسم>
</ HTML>