توقف (stop())

گاهی انیمیشن jQuery طولانی می شود و حوصله ات سر می رود. این جاست که متد stop در jQuery به دادت می رسد و انیمیشن را همان لحظه متوقف می کند.

متد stop در jQuery چیست؟

متد stop() انیمیشن یا افکت را قبل از تمام شدن نگه می دارد. یعنی اگر یک اسلاید یا فید در حال اجرا باشد، می توانی وسط راه ترمز بکشی.

این متد روی همه افکت ها کار می کند؛ مثل اسلاید، محو شدن (fade) و انیمیشن های سفارشی که با انیمیشن (Animate) ساخته ای.

نکته: افکت (Effect) یعنی هر حرکت یا تغییر نرم روی ظاهر عنصر؛ مثلا باز و بسته شدن یک پنل.

$("selector").stop(stopAll, goToEnd);

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

پارامتر stopAll تعیین می کند فقط انیمیشن فعلی متوقف شود یا صف بقیه انیمیشن ها هم پاک شود. پارامتر goToEnd هم تعیین می کند انیمیشن مستقیم به حالت نهایی برود یا همین جا خشک شود.

پارامترهای stopAll و goToEnd با مثال روزمره

صف (Queue) یعنی لیستی از کارها که نوبتی اجرا می شوند. در انیمیشن jQuery این یعنی چند حرکت پشت سر هم برای یک عنصر تعریف کرده ای.

اگر stopAll برابر false باشد، فقط حرکت فعلی می ایستد؛ بقیه حرکات در صف بعدا اجرا می شوند. اما اگر true باشد، کل صف خالی می شود؛ یعنی همه برنامه های بعدی لغو می شوند.

پارامتر goToEnd وقتی true باشد، عنصر یک پرش می زند و مستقیم به حالت آخر انیمیشن می رسد. اگر false باشد، در همان وضعیت فعلی متوقف می شود.

مثال ساده: توقف اسلاید یک پنل

در مثال منبع، یک دکمه اسلاید پانل را شروع می کند و دکمه دیگر با متد stop آن را متوقف می کند. کد jQuery برای دکمه توقف به شکل زیر است:

$("#stop").click(function() {
  $("#panel").stop();
});

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

اینجا هیچ پارامتری به stop() نداده ایم. پس فقط انیمیشن فعلی روی #panel متوقف می شود و اگر چیزی در صف باشد، بعدا می تواند اجرا شود.

چه زمانی از متد stop در jQuery استفاده کنیم؟

فرض کن منوی اسلایدی داری که با حرکت موس چند بار پشت سر هم باز و بسته می شود. اگر stop را نداشته باشی، انیمیشن ها روی هم می افتند و رابط کاربری شلوغ و عصبی می شود.

با استفاده از متد stop در jQuery می توانی قبل از شروع یک انیمیشن جدید، انیمیشن قبلی را متوقف کنی. این کار سایت را حرفه ای تر و قابل کنترل تر می کند.

نکته: همیشه قبل از اجرای یک انیمیشن جدید، می توانی یک .stop() صدا بزنی تا انیمیشن های قبلی جمع شوند.

گام های عملی برای تمرین متد stop در jQuery

1. یک صفحه ساده با یک دکمه و یک پنل بساز که با متد اسلاید اسلاید (Slide) باز و بسته شود.
2. یک دکمه جدید با id برابر stop اضافه کن تا مسئول توقف انیمیشن باشد.
3. کد مثال stop را در فایل اسکریپت قرار بده و تست کن که هنگام اسلاید، با کلیک روی دکمه stop انیمیشن همان لحظه می ایستد.
4. در نهایت، با پارامترهای stopAll و goToEnd بازی کن تا تاثیر آن ها روی صف انیمیشن را بهتر بفهمی.

جمع بندی سریع

• متد stop() انیمیشن یا افکت فعلی را متوقف می کند.
• پارامتر stopAll تعیین می کند صف انیمیشن ها پاک شود یا نه.
• پارامتر goToEnd می تواند عنصر را مستقیم به حالت نهایی ببرد.
• متد stop در jQuery روی اسلاید، فید و انیمیشن های سفارشی کار می کند.
• استفاده درست از stop رابط کاربری را روان تر و قابل پیش بینی تر می کند.