10) افکت ها در جی کوئری (تکمیلی)

متد ()Stop

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

selector.stop( [clearQueue], [gotoEnd] ) ;

پارامترهای متد stop

clearQueue: این پارامتر اختیاری  است  و از نوع boolean است و مقادیر true یا false  را به عنوان ورودی دریافت میکند. اگر مقدار آن را true قرار دهیم، کل animation ها و افکتهای اعمال شده روی المان مورد نظر که به صورت پشت سر هم  یکی پس از دیگری  در حال اجرا هستند متوقف می شوند.
gotoEnd: این پارامتر نیز اختیاری از نوع boolean است و مقادیر true یا false را به عنوان ورودی قبول میکند. اگر مقدار این پارامتر برابر true باشد انیمیشن در حال اجرا تکمیل می شود.

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

تابع callback در جی کوئری

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

$("button").click(function(){
  $("p").hide("slow", function(){
    alert("The paragraph is now hidden");
  });
});

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

$("button").click(function(){
  $("p").hide(1000);
  alert("The paragraph is now hidden");
});

زنجیره ای کردن

تا به اینجای کار ما در دستورات جی کوئری کد ها و افکت هایمان را یک به یک و جداگانه تعریف میکردیم. یکی از قابلیت های جی کوئری این است که به ما اجازه میدهد تا به صورت ذنجیره ای افکت هایمان را پشت سر هم بنویسیم. به مثال زیر توجه کنید:

$("#p1").css("color", "red").slideUp(2000).slideDown(2000);

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

از آنجا که گاهی اوقات این کد میتواند طولانی باشد، میتوانیم کدهای آن را زیر یک دیگر و با سینتکس بهتری بنویسیم:

$("#p1").css("color", "red")
  .slideUp(2000)
  .slideDown(2000);