jQuery - روش animate()

دستورالعمل‌های اثرات jQuery

مثال

تغییر ارتفاع عنصر "div":

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

آزمایش کنید

تعریف و استفاده

مетод animate() یک انیمیشن شخصی‌سازی شده برای مجموعه‌ای از属性 CSS اجرا می‌کند.

این روش با استفاده از سبک‌های CSS، عنصر را از یک حالت به حالت دیگر تغییر می‌دهد. مقادیر CSS به تدریج تغییر می‌کنند، که به ایجاد انیمیشن منجر می‌شود.

تنها مقادیر عددی می‌توانند انیمیشن ایجاد کنند (مثلاً "margin:30px"). مقادیر رشته‌ای نمی‌توانند انیمیشن ایجاد کنند (مثلاً "background-color:red").

نکته:برای ایجاد انیمیشن‌های نسبی (animations relative) از "+=" یا "-=" استفاده کنید.

شیوه 1

$().animate(سبک‌ها,سرعت,easing,callback)
پارامترها توضیحات
سبک‌ها

ضروری. مقدارهای CSS و نوعی که باید تأثیرات انیمیشن را ایجاد کند.

ممکنه مقدارهای CSS (مثال ارائه شده):

نکته:سبک‌های CSS با استفاده از نام‌های DOM (مثلاً "fontSize") تنظیم می‌شوند، نه نام‌های CSS (مثلاً "font-size").
سرعت

اختیاری. تنظیم سرعت انیمیشن. پیش‌فرض "normal" است.

مقدارهای ممکن:

  • میلی‌ثانیه (مثلاً 1500)
  • "slow"
  • "normal"
  • "fast"
easing

اختیاری. تنظیم عملکرد easing برای تنظیم سرعت انیمیشن در نقاط مختلف انیمیشن

عملکرد‌های easing داخلی:

  • swing
  • linear

در پلاگین‌های گسترش ارائه شده عملکرد‌های easing بیشتر ارائه شده است.
callback

اختیاری. عملکردی که پس از اجرای کامل انیمیشن animate باید اجرا شود

برای یادگیری بیشتر در مورد callback، لطفاً وب‌سایت ما را بازدید کنید jQuery Callback این فصل.

نوع 2

$().animate(سبک‌ها,گزینه‌ها)
پارامترها توضیحات
سبک‌ها ضروری. تنظیم سبک‌ها و مقادیر CSS برای ایجاد انیمیشن (مانند بالا)
گزینه‌ها

اختیاری. تنظیم تنظیمات اضافی انیمیشن

مقدارهای ممکن:

  • سرعت - تنظیم سرعت انیمیشن
  • easing - تعیین عملکرد easing مورد استفاده
  • callback - تعیین عملکردی که پس از تکمیل انیمیشن باید اجرا شود
  • step - تعیین عملکردی که پس از تکمیل هر مرحله انیمیشن باید اجرا شود
  • queue - یک مقدار بولین. نشان‌دهنده این که آیا باید انیمیشن در صف انیمیشن‌ها قرار گیرد یا خیر. اگر false باشد، انیمیشن بلافاصله شروع خواهد شد
  • specialEasing - از سبک‌ها 映射 یک یا چند属性 CSS و عملکرد‌های easing مرتبط با آن‌ها

دستورالعمل‌های اثرات jQuery