jQuery 效果 - animate() 方法

دليل إجراءات jQuery

实例

改变 "div" 元素的高度：

$(".btn1").click(function(){
  $("#box").animate({height:"300px"});
});

亲自试一试

定义和用法

animate() 方法执行 CSS 属性集的自定义动画。

该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。

只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。

التعليق:使用 "+=" 或 "-=" 来创建相对动画（relative animations）。

语法 1

$().animate(styles,speed,easing,callback)
المعلمات الوصف
styles

必需。规定产生动画效果的 CSS 样式和值。

可能的 CSS 样式值（提供实例）：

التعليق:استخدام DOM Name (مثل "fontSize") لتحديد أنواع الأسلوب CSS وليس الاسم CSS (مثل "font-size")
speed

اختياري. تحديد سرعة التحريك. القيمة الافتراضية هي "normal"

القيم المحتملة:

  • المللي ثانية (مثل 1500)
  • "slow"
  • "normal"
  • "fast"
easing

اختياري. تحديد دالة التيسير التي يجب استخدامها في نقاط مختلفة من التحريك

الدوال التيسير المدمجة:

  • swing
  • linear

يقدم المكون الإضافي الموسع العديد من دوال التيسير
callback

اختياري. الدالة التي يجب تنفيذها بعد اكتمال تنفيذ دالة animate

للتعرف على المزيد حول callback، يرجى زيارة إصدار jQuery هذه الفصل.

النوع 2

$().animate(styles,options)
المعلمات الوصف
styles مطلوب. تحديد أنواع و القيم للأسلوب CSS الذي ينتج تأثير التحريك (مثل السابق)
options

اختياري. تحديد خيارات إضافية للتحريك

القيم المحتملة:

  • speed - تعيين سرعة التحريك
  • easing - تحديد الدالة التيسير التي يجب استخدامها
  • callback - تحديد الدالة التي يجب تنفيذها بعد اكتمال التحريك
  • step - تحديد الدالة التي يجب تنفيذها بعد كل خطوة من التحريك
  • queue - قيمة بولية. تشير إلى ما إذا كان يجب وضع التحريك في قائمة الانتظار. إذا كانت القيمة false، فإن التحريك سيبدأ فورًا
  • specialEasing - من styles تخطيط عدة أو جميع خصائص CSS، بالإضافة إلى الدوال التيسير المترادفة لها

دليل إجراءات jQuery