Latest web development tutorials

أمثلة واجهة المستخدم مسج - لون الرسوم المتحركة (صور متحركة)

استخدام .animate () لتحقيق لون الرسوم المتحركة.

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

المجمعة مسج واجهة المستخدم مسج اللون المساعد، مسج اللون المساعد يوفر الرسوم المتحركة اللون وغيرها من الوظائف ذات المنفعة ذات الصلة اللون.

أنيمي (الرسوم المتحركة) عرض توضيحي

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

<! DOCTYPE HTML>
<الاكواد لانج = "EN">
<رئيس>
  <محارف ميتا = "UTF-8">
  <عنوان> مسج واجهة المستخدم الأثر - الرسوم المتحركة (الرسوم المتحركة) عرض توضيحي </ عنوان>
  <وصلة يختلط = "أنماط" أ 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؛ الطول: 135px؛ الحشو: 0.4em، موقف: النسبية؛ الخلفية: # الاتحاد الفرنسي؛}
    #effect H3 {هامش: 0؛ الحشو: 0.4em؛ مواءمة النصوص: مركز؛}
  </ النمط>
  <script>
  $ (وظيفة () {
    الدولة فار = صحيح.
    $ ( "#button"). انقر (وظيفة () {
      إذا (ولاية) {
        $ ( "#effect") .animate ({
          backgroundColor: "# aa0000"
          اللون: "# الاتحاد الفرنسي"،
          عرض: 500
        }، 1000)؛
      } {شيء آخر
        $ ( "#effect") .animate ({
          backgroundColor: "# الاتحاد الفرنسي"،
          اللون: "# 000"،
          عرض: 240
        }، 1000)؛
      }
      الدولة = دولة !؛
    })؛
  })؛
  </ script>
</ رئيس>
<body>
 
<div الطبقة = "toggler">
  <شعبة معرف = "تأثير" الطبقة = "واجهة المستخدم القطعة-المحتوى واجهة المستخدم الزاوية للجميع">
    <H3 الطبقة = "واجهة المستخدم القطعة-رأس واجهة المستخدم الزاوية للجميع"> أنمي (الرسوم المتحركة) </ H3>
    <P>
      Etiam يبيرو neque، luctus لذلك، eleifend اللجنة الوطنية للانتخابات، سمبر في، أبجد. سد الر. metus لا عقوبة أبجد، adipiscing التحرير، luctus الحوار الاقتصادي الاستراتيجي، hendrerit الذاتية، ميل.
    </ P>
  </ div>
</ div>
 
<a href="#" id="button" class="ui-state-default ui-corner-all"> آثار التحول </A>
 
 
</ الجسم>
</ HTML>

عرض تجريبي