افکت stop در جی کوئری

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

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

در این ساختار، selector مشخص می کند کدام عنصر تحت تاثیر قرار بگیرد. برای مثال، می توانید از شناسه یک عنصر، نام تگ یا یک کلاس استفاده کنید. متد stop به تنهایی انیمیشن جاری را متوقف می کند؛ رفتار آن در برابر انیمیشن های منتظر، به مقدار پارامتر stopAll بستگی دارد.

برای استفاده از این متد، jQuery باید در صفحه بارگذاری شده باشد و انتخابگر نیز به عنصر مورد نظر اشاره کند. اگر انتخابگر هیچ عنصری را پیدا نکند، فراخوانی متد معمولا خطای اجرایی ایجاد نمی کند، اما تغییری هم در صفحه دیده نمی شود.

پارامتر stopAll تعیین می کند که متد فقط انیمیشن در حال اجرا را متوقف کند یا انیمیشن های منتظر در صف را هم کنار بگذارد. مقدار پیش فرض آن false است. بنابراین، اگر این پارامتر را ننویسید یا مقدار false به آن بدهید، انیمیشن جاری متوقف می شود و موارد بعدی صف می توانند پس از آن اجرا شوند.

اگر مقدار true باشد، انیمیشن جاری و انیمیشن های منتظر در صف متوقف می شوند. این گزینه زمانی کاربرد دارد که ادامه صف دیگر مناسب نیست؛ مثلا کاربر چند بار یک دکمه را زده و انیمیشن های تکراری در صف جمع شده اند.

$("#stop").on("click", function() {
  $("div").stop(true);
});

در مثال بالا، با کلیک روی دکمه ای که شناسه آن stop است، افکت های عناصر div متوقف می شوند و صف انیمیشن آن ها پاک می شود. برای محدود کردن اثر به یک عنصر مشخص، بهتر است به جای انتخاب عمومی همه div ها، شناسه یا کلاس دقیق تری انتخاب کنید.

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

با تنظیم این پارامتر روی true، انیمیشن جاری به پایان می رسد و ویژگی های متحرک به مقدار نهایی می رسند. اگر پارامتر اول را نیز true کنید، صف انیمیشن ها پاک می شود و انیمیشن جاری به مقصد خود می رسد.

$("#finish").on("click", function() {
  $("div").stop(true, true);
});

این انتخاب برای حالتی مناسب است که توقف ناگهانی در میانه مسیر، ظاهر نامناسبی ایجاد می کند و ترجیح می دهید عنصر به نتیجه کامل برسد. دقت کنید که goToEnd جایگزین پاک کردن صف نیست؛ برای حذف انیمیشن های منتظر باید رفتار پارامتر stopAll را هم در نظر بگیرید.

انتخابگر تعیین می کند متد stop روی کدام عنصر اجرا شود. استفاده از انتخابگری عمومی مانند $("div") ممکن است همه div های صفحه را هدف بگیرد؛ از جمله عناصری که قرار نبوده انیمیشن آن ها متوقف شود. برای کنترل دقیق تر، شناسه یا کلاسی را انتخاب کنید که فقط به عنصر مورد نظر اختصاص دارد.

برای مثال، اگر پنل بازشونده شناسه menu-panel دارد، انتخابگر $("#menu-panel") از انتخاب همه پنل های صفحه دقیق تر است. این کار به ویژه در صفحه هایی با چند انیمیشن هم زمان، احتمال تداخل رفتارها را کاهش می دهد.

فراخوانی ساده stop() معمولا انیمیشن در حال اجرا را متوقف می کند، اما انیمیشن های بعدی ممکن است همچنان در صف باقی بمانند. اگر کاربر چند بار پشت سر هم روی کنترل انیمیشن کلیک کند، باقی ماندن این موارد می تواند باعث شود افکت ها بعدا با ترتیبی غیرمنتظره اجرا شوند.

برای نمونه، در منویی که با هر کلیک باز و بسته می شود، می توانید پیش از اجرای افکت جدید، صف را پاک کنید. انتخاب مقدار مناسب به تجربه ای بستگی دارد که می خواهید برای کاربر بسازید؛ پاک کردن صف همیشه بهترین انتخاب نیست، اما در کنترل های پرتکرار اغلب از انباشته شدن افکت ها جلوگیری می کند.

در نمونه های ساده می توان با click() رویداد کلیک را متصل کرد. در کدهای جدیدتر، استفاده از on("click", ...) روش روشنی برای تعریف رویداد است و به خوانایی کد کمک می کند. اگر عنصر دکمه پس از بارگذاری اولیه به صفحه اضافه می شود، ممکن است لازم باشد از رویداددهی واگذار شده استفاده کنید.

مثلا اگر دکمه توقف از ابتدا در صفحه وجود دارد، اتصال مستقیم رویداد کافی است. اما اگر یک پنجره یا بخش تعاملی به صورت پویا ساخته می شود، رویداد باید به عنصری متصل شود که هنگام بارگذاری صفحه وجود داشته است؛ در غیر این صورت، دکمه جدید ممکن است واکنشی نشان ندهد.

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

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

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

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

در نمونه زیر، دکمه شروع ارتفاع عنصر را به تدریج افزایش می دهد و دکمه توقف اجرای انیمیشن را متوقف می کند. برای ساده ماندن مثال، انتخابگرها با شناسه مشخص شده اند و رویدادها جداگانه تعریف شده اند.

$("#start").on("click", function() {
  $("#box").animate({ height: "300px" }, 3000);
});

$("#stop").on("click", function() {
  $("#box").stop();
});

در این کد، مقدار زمان انیمیشن بر حسب میلی ثانیه تعیین شده است. با انتخاب دکمه توقف، عنصر در موقعیت فعلی باقی می ماند. اگر می خواهید انیمیشن های منتظر نیز پاک شوند، فراخوانی را به $("#box").stop(true) تغییر دهید.

برای رسیدن عنصر به ارتفاع پایانی و پاک شدن صف، از $("#box").stop(true, true) استفاده کنید. اگر در صفحه چند عنصر وجود دارد، مطمئن شوید شناسه ها یکتا هستند و انتخابگر هر دکمه به عنصر درست اشاره می کند.

یکی از برداشت های نادرست این است که stop() همیشه تمام انیمیشن های یک عنصر را حذف می کند. در واقع، مقدار پیش فرض پارامترها چنین رفتاری را تضمین نمی کند. اگر افکت های بعدی در صف باقی بمانند، ممکن است پس از توقف افکت جاری اجرا شوند.

برای رفع این وضعیت، ابتدا مشخص کنید کدام رفتار را می خواهید و سپس پارامتر مناسب را صریح بنویسید. به کار بردن stop(true) صف را پاک می کند؛ افزودن مقدار true برای پارامتر دوم، انیمیشن جاری را هم به مقصد نهایی می رساند.

اگر انتخابگر به چندین عنصر اشاره کند، متد stop روی همه آن ها اثر می گذارد. ممکن است این رفتار عمدی باشد، اما در صفحه های پیچیده می تواند انیمیشن بخش های نامرتبط را هم متوقف کند. انتخابگر دقیق تر، کنترل بیشتری در اختیار شما می گذارد.

هنگام بررسی مشکل، انتخابگر را جداگانه آزمایش کنید و مطمئن شوید فقط عناصر مورد نظر انتخاب می شوند. اگر عناصر یک گروه باید هم زمان متوقف شوند، استفاده از کلاس مشترک مناسب است؛ در غیر این صورت، شناسه یا کلاس اختصاصی انتخاب بهتری خواهد بود.

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

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

افکت stop در jQuery راهی ساده برای متوقف کردن انیمیشن های یک عنصر است. با متد stop() می توانید اجرای جاری را کنترل کنید؛ پارامتر stopAll در پاک کردن صف نقش دارد و پارامتر goToEnd مشخص می کند عنصر در وضعیت فعلی بماند یا به پایان انیمیشن برسد.

پیش از انتخاب پارامترها، رفتار مورد انتظار را مشخص کنید: آیا فقط انیمیشن جاری باید متوقف شود؟ آیا افکت های منتظر باید حذف شوند؟ آیا عنصر باید به مقصد نهایی برسد؟ پاسخ به این پرسش ها کمک می کند کدی بنویسید که در برابر کلیک های تکراری و تعامل های سریع، قابل پیش بینی باقی بماند.