انیمیشن (Animate)

در این درس می بینی چطور با انیمیشن jQuery می توانی عناصر صفحه را نرم حرکت بدهی؛ مثلا یک جعبه را کم کم به راست ببری یا اندازه اش را تغییر بدهی.

متد animate در انیمیشن jQuery چیست؟

متد animate() یعنی تغییر دادن ویژگی های CSS با حرکت نرم و زمان دار. ویژگی CSS یعنی چیزی مثل عرض، ارتفاع یا موقعیت عنصر که ظاهرش را مشخص می کند.

ساختار کلی متد این طور است: تابع روی یک انتخاب گر (selector) اجرا می شود و یک شیء از ویژگی های CSS می گیرد؛ بعد هم می توانی سرعت و تابع callback را بدهی.

نکته: callback یعنی تابعی که بعد از تمام شدن انیمیشن اجرا می شود؛ مثلا بعد از پایان حرکت، یک پیام نشان بدهد.

مثال ساده: حرکت دادن یک div به راست

در مثال اصلی منبع، با کلیک روی دکمه، یک عنصر <div> آرام آرام تا 250 پیکسل به سمت راست می رود. این ساده ترین نمونه انیمیشن jQuery است.

$("button").click(function() {
  $("div").animate({
    left: '250px'
  });
});

مشاهده در ادیتور

پارامتر params همان شیء جاوااسکریپت است که ویژگی ها را نگه می دارد؛ مثلا اینجا فقط left عوض می شود. پارامتر speed می تواند "slow"، "fast" یا یک عدد میلی ثانیه باشد.

انیمیشن چند ویژگی هم زمان با انیمیشن jQuery

متد animate() می تواند چند ویژگی را با هم تغییر دهد. این کار شبیه این است که هم زمان هم قد کشوی میز را عوض کنی، هم رنگش را کم نورتر کنی.

$("button").click(function() {
  $("div").animate({
    left: '250px',
    opacity: '0.5',
    height: '150px',
    width: '150px'
  });
});

مشاهده در ادیتور

نکته: تقریبا همه ویژگی های CSS را می توانی انیمیت کنی؛ فقط باید نام ویژگی را به صورت camelCase بنویسی؛ مثلا paddingLeft به جای padding-left.

هشدار: انیمیشن رنگ ها داخل هسته jQuery نیست. برای رنگ باید افزونه Color Animations از سایت jQuery بگیری.

استفاده از مقدارهای نسبی در متد animate

گاهی می خواهی نسبت به مقدار فعلی حرکت کنی؛ مثلا هر بار 150 پیکسل به ارتفاع اضافه شود. در این حالت در انیمیشن jQuery از += یا -= استفاده می کنیم.

$("button").click(function() {
  $("div").animate({
    left: '250px',
    height: '+=150px',
    width: '+=150px'
  });
});

مشاهده در ادیتور

در این کد، هر بار دکمه را بزنی، عرض و ارتفاع عنصر 150 پیکسل بیشتر می شود. این دقیقا شبیه بازی است که شخصیتت هر بار یک لِوِل بزرگ تر می شود.

استفاده از show / hide / toggle در انیمیشن jQuery

برای بعضی ویژگی ها می توانی به جای عدد، مقدارهای آماده بدهی. مثلا "show"، "hide" یا "toggle" تا ارتفاع عنصر باز و بسته شود.

$("button").click(function() {
  $("div").animate({
    height: 'toggle'
  });
});

مشاهده در ادیتور

در این مثال، هر کلیک باعث می شود ارتفاع <div> بین باز و بسته جابه جا شود. این روش برای ساختن آکاردئون یا منوی سوالات متداول خیلی راحت است.

صف انیمیشن ها در jQuery (Animation Queue)

jQuery برای انیمیشن ها یک مفهوم مهم به نام صف (Queue) دارد. صف یعنی لیست مرتب کارها؛ هر کدام تمام شد، بعدی شروع می شود. این جا یعنی هر animate() بعد از قبلی اجرا می شود.

$("button").click(function() {
  var div = $("div");
  div.animate({
    height: '300px',
    opacity: '0.4'
  }, "slow");
  div.animate({
    width: '300px',
    opacity: '0.8'
  }, "slow");
  div.animate({
    height: '100px',
    opacity: '0.4'
  }, "slow");
  div.animate({
    width: '100px',
    opacity: '0.8'
  }, "slow");
});

مشاهده در ادیتور

اینجا چهار انیمیشن پشت سر هم اجرا می شوند. اول قد عنصر زیاد می شود، بعد عرض، بعد دوباره قد کم می شود و در آخر عرض برمی گردد. jQuery خودش این ترتیب را مدیریت می کند.

ترکیب انیمیشن jQuery با افکت های دیگر

می توانی بعد از یک انیمیشن، از افکت هایی مثل اسلاید (Slide) یا افکت محو شدن (Fade) هم استفاده کنی. مثلا اول اندازه جعبه را با انیمیشن jQuery تغییر بده، بعد آن را آرام محو کن.

نکته: برای حرکت دادن عنصر روی صفحه، یادت باشد position را در CSS روی relative، absolute یا fixed بگذاری؛ چون حالت static قابل جابه جایی نیست.

گام های عملی برای تمرین انیمیشن (Animate)

1. یک صفحه ساده بساز و یک <button> و یک <div> در آن قرار بده؛ برای <div> مقدار position را مثلاً روی relative بگذار.
2. کد مثال اول را کپی کن و تست کن که با کلیک، <div> تا 250 پیکسل به راست برود.
3. حالا مثال چند ویژگی را امتحان کن و مقدار opacity، width و height را عوض کن تا حس انیمیشن jQuery را بهتر درک کنی.
4. در نهایت از مثال صف استفاده کن و چند انیمیشن پشت سر هم روی همان عنصر اجرا کن؛ مثل یک انیمیشن کوچک برای لوگوی سایتت.

جمع بندی سریع

• متد animate() برای ساخت انیمیشن jQuery روی ویژگی های CSS است.
• می توانی چند ویژگی مثل height، width و opacity را هم زمان تغییر بدهی.
• با += و -= مقدارهای نسبی می سازی، نه مقدار ثابت.
• مقدارهای show، hide و toggle برای تغییر وضعیت نمایش کاربردی هستند.
• jQuery انیمیشن ها را در صف اجرا می کند؛ هر animate بعدی، بعد از قبلی انجام می شود.