سلامی دوباره خدمت شما علاقه مندان به آموزش جی کوئری. همچنان مبحث افکت ها در جی کوئری را با هم دنبال می کنیم و در جلسه پیش با متد animation در جیکوئری جهت متحرک سازی عنصر html آشنا شدید و در این جلسه با آموزش متد stop در جی کوئری همراه شما هستیم.
متد توقف یا متد stop در جی کوئری
در جلسات پیش دانستیم که توسط متدهایی در جی کوئری می توانید افکت های زیبا و کاربردی را در صفحه ایجاد کنید و از آن ها استفاده کنید. اما جی کوئری متد دیگری را به نام stop() جهت توقف اجرای انیمیشن یا افکت در حال اجرا در اختیار شما قرار داده تا در صورت لزوم اجرای انیمیشن را در هر زمانی از اجرا متوقف کنید.
نگارش متد stop() به شکل زیر است:
selector.stop( [clearQueue], [gotoEnd] ) ;
پارامترهای متد stop
clearQueue: این پارامتر اختیاری از نوع boolean است و مقادیر true/false میپذیرد. اگر مقدار این پارامتر را برابر true قرار دهید، کل animation ها و افکتهای اعمال شده روی عنصر مورد نظر که به صورت صف پشت سر هم در حال اجرا هستند متوقف می شوند.
gotoEnd: این پارامتر اختیاری از نوع boolean است و مقادیر true/false میپذیرد. اگر مقدار این پارامتر برابر true باشد انیمیشن در حال اجرا فورا و سریعا تکمیل می شود. توجه داشته باشید که این شامل مخفی کردن عنصر مورد نظر و یا فراخوانی تابع Callback در متدهایی که این تابع را به عنوان پارامتر می پذیرند نیز میشود.
مثال های کاربردی جهت استفاده از متد stop در جی کوئری
در این مثال ساده بعد از زدن دکمه button افکت slide متوقف می شود.
$(document).ready(function(){ $('div').slideUp() $('button').click(function(){ $('div').stop(); }) })
در مثال زیر کلیه انیمیشن های در حال اجرا متوقف می شوند.
$(document).ready(function(){ $('div').animate({width:'400px'},2000); $('div').animate({height:'400px'},2000); $('button').click(function(){ $('div').stop(true); }) })
در مثال زیر فقط animation اول متوقف می شود و انیمیشن دوم اجرا می شود
$(document).ready(function(){ $('div').animate({width:'400px'},2000); $('div').animate({height:'400px'},2000); $('button').click(function(){ $('div').stop(false); }) })
در مثال زیر انیمشین اول فورا تکمیل می شود و انیمیشن دوم ادامه پیدا می کند.
$(document).ready(function(){ $('div').animate({width:'400px'},2000); $('div').animate({height:'400px'},2000); $('button').click(function(){ $('div').stop(false,true); }) })
