در بخش قبلی انیمیشن ها در jQuery را بررسی کردیم. در این قسمت از سری آموزش جی کوئری, به افکت متوقف کردن انیمیشن جی کوئری می پردازیم.
متد stop() در جی کوئری
متد stop() در جی کوئری برای متوقف کردن انیمیشن یا افکت های jQuery که روی عناصر انتخابی در حال اجرا هستند, استفاده می شود.
سینتکس ساده متد stop() جی کوئری بصورت زیر است :
|
1 |
$(selector).stop(stopAll, goToEnd); |
توضیح کوتاه پارامترها در سینتکس بالا :
- پارامتر اختیاری و بولین
stopAllمشخص می کند که انیمیشن صف بندی شده حذف شود یا نه. مقدار پیش فرضfalseاست و به این معناست که انیمیشن متوقف می شود و بقیه انیمیشن ها در صف به ترتیب اجرا خواهند شد. - پارامتر اختیاری و بولین
goToEndمشخص می کند که انیمیشن فعلی را بلافاصله به پایان برساند. مقدار پیش فرضfalseاست.
یک مثال ساده از متد stop() برای عملیات واقعی که می توانید انیمیشن را با کلیک روی دکمه شروع و متوقف کنید را می بینید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<script type="text/javascript"> $(document).ready(function(){ // Start animation $(".start-btn").click(function(){ $("img").animate({left: "+=150px"}, 2000); }); // Stop running animation $(".stop-btn").click(function(){ $("img").stop(); }); // Start animation in the opposite direction $(".back-btn").click(function(){ $("img").animate({left: "-=150px"}, 2000); }); // Reset to default $(".reset-btn").click(function(){ $("img").animate({left: "0"}, "fast"); }); }); </script> |
نکته: متد stop() جی کوئری برای همه افکت های jQuery مثل fading, sliding, show, hide و انیمیشن های سفارشی کار می کند.
یک مثال دیگر از این متد را می بینید که اگر روی دکمه “Slide Toggle” بعد از شروع انیمیشن و قبل از اتمام آن دوباره کلیک کنید, انیمیشن بلافاصله در جهت مخالف از نقطه شروع ذخیره شده شروع می کند.
|
1 2 3 4 5 6 7 8 |
<script type="text/javascript"> $(document).ready(function(){ // Kill and toggle the current sliding animation $(".toggle-btn").on("click", function(){ $(".box").stop().slideToggle(1000); }); }); </script> |
ساخت افکت Hover نرم
هنگام ساخت افکت انیمیشنی hover , یکی از مشکلاتی که ممکن است در انیمیشن های صف بندی شده مواجه شوید این است که اشاره گر ماوس را سریعا روی المان برده و خارج می کنید.
چرا که در این موقعیت رویدادهای mouseenter یا mouseleave سریعا قبل از اتمام انیمیشن شلیک می شوند. برای جلوگیری از این مشکل و ساخت یک افکت hover نرم می توانید از زنجیره متد stop(true, true) استفاده کنید.
|
1 2 3 4 5 6 7 8 9 |
<script type="text/javascript"> $(document).ready(function(){ $(".box").hover(function(){ $(this).find("img").stop(true, true).fadeOut(); }, function(){ $(this).find("img").stop(true, true).fadeIn(); }); }); </script> |
نکته: متد stop(true, true) برای متوقف کردن انیمیشن جی کوئری در این مثال, همه انیمیشن های صف بنده شده را حذف می کند و به مقدار نهایی انیمیشن فعلی می رود.
امیدوارم در این بخش آموزش جی کوئری, از متوقف کردن انیمیشن جی کوئری نهایت استفاده را برده باشید.
در بخش بعدی با تکنیک زنجیر کردن متدها یا chaining در جی کوئری , آشنا می شوید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید
