Latest web development tutorials

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

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

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

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

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

<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
  <محارف ميتا = "UTF-8">
  <عنوان> مسج واجهة المستخدم الأثر - .switchClass () عرض توضيحي </ عنوان>
  <وصلة يختلط = "أنماط" أ 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 {الموقف: النسبية؛}
  .newClass {العرض: 240px؛ الحشو: 1em؛ mso-: 0؛ حجم الخط: 1.2em؛ هامش: 0؛}
  .anotherNewClass {نص المسافة البادئة: 40px؛ mso-: .4em، العرض: 410px؛ الطول: 100px؛ الحشو: 30px؛ هامش: 10px؛ حجم الخط: 1.6em؛}
  </ النمط>
  <script>
  $ (وظيفة () {
    $ ( "#button"). انقر (وظيفة () {
      $ ( ".newClass") .switchClass ( "NewClass"، "anotherNewClass"، 1000)؛
      $ ( ".anotherNewClass") .switchClass ( "AnotherNewClass"، "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>