متد stop

متد stop()

متد stop() انیمیشن یا افکتِ در حال اجرا را قبل از پایان متوقف می‌کند:

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

• stopAll: (اختیاری، پیش‌فرض false) آیا همه انیمیشن‌های صف هم لغو شوند؟
• goToEnd: (اختیاری، پیش‌فرض false) آیا انیمیشن فعلی فوراً به پایان خود برسد؟

مثال ساده

// توقف انیمیشن در حال اجرا
$("#stop").click(function() {
    $("#panel").stop();
});

چرا stop مهم است؟

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

// ✅ الگوی استاندارد: stop قبل از انیمیشن جدید
$("#panel").stop().slideToggle();

// ❌ بدون stop: با کلیک‌های سریع، انیمیشن‌ها انباشته می‌شوند
$("#panel").slideToggle();

ترکیب پارامترها

// فقط انیمیشن فعلی متوقف شود (پیش‌فرض)
$("#panel").stop();

// همه صف لغو شود و انیمیشن فعلی همان‌جا قطع شود
$("#panel").stop(true);

// همه صف لغو شود و انیمیشن فعلی فوراً به پایان برسد
$("#panel").stop(true, true);

مثال کاربردی: منوی هاور با stop

// منوی کشویی بدون مشکل انباشته شدن
$(".menu-item").hover(
    function() {
        $(this).children(".submenu").stop().slideDown(200);
    },
    function() {
        $(this).children(".submenu").stop().slideUp(200);
    }
);

جمع‌بندی

• stop() انیمیشن در حال اجرا را متوقف می‌کند
• پارامتر اول (stopAll) کل صف را لغو می‌کند
• پارامتر دوم (goToEnd) انیمیشن را فوراً به پایان می‌رساند
• الگوی stop().slideToggle() بهترین راه برای جلوگیری از انباشته شدن انیمیشن‌هاست