آموزش استفاده از متد animate() در jQuery
تابع animate() یکی از قدرتمندترین ابزارهای jQuery برای ایجاد انیمیشن‌های سفارشی است. این تابع به شما امکان می‌دهد تا با تغییر تدریجی CSS عناصر، انیمیشن‌های جذابی خلق کنید.
نکته: برای استفاده از animate() باید حتما کتابخانه jQuery را در صفحه خود وارد کرده باشید.
سینتکس پایه
سینتکس اصلی این متد به صورت زیر است:
$(selector).animate({properties}, duration, easing, callback);
- properties: شیء شامل ویژگی‌های CSS و مقادیر نهایی آنها
- duration: مدت زمان انیمیشن بر حسب میلی‌ثانیه یا کلمات کلیدی (slow, fast)
- easing: نوع حرکت انیمیشن (پیش‌فرض: swing)
- callback: تابعی که پس از اتمام انیمیشن اجرا می‌شود
مثال‌های کاربردی
| کاربرد |
کد نمونه |
| تغییر اندازه |
$("#box").animate({width: "200px", height: "200px"}); |
| حرکت افقی |
$("#box").animate({left: "+=100px"}); |
| تغییر شفافیت |
$("#box").animate({opacity: 0.5}, 1000); |
نکات پیشرفته
- می‌توانید چندین انیمیشن را به صورت زنجیره‌ای اجرا کنید
- از کلمه کلیدی "show"، "hide" یا "toggle" در properties استفاده نکنید
- برای رنگ‌ها باید از پلاگین jQuery UI استفاده کنید
- می‌توانید انیمیشن‌ها را با متد stop() متوقف کنید
برای یادگیری عمیق‌تر و دیدن مثال‌های بیشتر، پیشنهاد می‌کنیم به این صفحه بروید و آموزش جامع انیمیشن در jQuery را مطالعه کنید.
توجه: هنگام استفاده از animate() حتما به واحدهای اندازه‌گیری دقت کنید و از مقادیر نسبی (مانند += یا -=) برای ایجاد انیمیشن‌های پویاتر استفاده نمایید.
