Latest web development tutorials

أمثلة واجهة المستخدم مسج - إضافة فئة (إضافة فئة)

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

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

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

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

<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
  <محارف ميتا = "UTF-8">
  <عنوان> مسج واجهة المستخدم الأثر - .addClass () عرض توضيحي </ عنوان>
  <وصلة يختلط = "أنماط" أ 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؛ حجم الخط: 1.2em؛ الحدود: 1PX الصلبة # 000؛ الخلفية: #eee؛ اللون: # 333؛}
    .newClass {نص المسافة البادئة: 40px؛ mso-: .4em، العرض: 410px؛ الطول: 100px؛ الحشو: 30px؛ هامش: 10px؛ حجم الخط: 1.6em؛}
  </ النمط>
  <script>
  $ (وظيفة () {
    $ ( "#button"). انقر (وظيفة () {
      $ ( "#effect") .addClass ( "NewClass"، 1000، رد)؛
      عودة كاذبة.
    })؛
 
    رد وظيفة () {
      setTimeout (وظيفة () {
        $ ( "#effect") .removeClass ( "NewClass")؛
      }، 1500)؛
    }
  })؛
  </ script>
</ رئيس>
<body>
 
<div الطبقة = "toggler">
  <شعبة معرف = "تأثير" الطبقة = "واجهة المستخدم الزاوية للجميع">
      Etiam يبيرو neque، luctus لذلك، eleifend اللجنة الوطنية للانتخابات، سمبر في، أبجد. الر سد.
  </ div>
</ div>
 
<a href="#" id="button" class="ui-state-default ui-corner-all"> تشغيل آثار </A>
 
 
</ الجسم>
</ HTML>