قسمت هفتم: افکت‌ها (stop و callback و chaining)

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

متوقف کردن انیمیشن های در جی کوئری

متد stop برای متوقف کردن یک انیمیشن قبل از اجرای کامل آن استفاده می شود.

برای مثال اگر ما یک متد slid down داشته باشیم که در حال اجرا باشد و در هنگام اجرا شدن آن روی دکمه ای با متد stop کلیک کنیم، اسلاید قبل از اجرا شدن به صورت کامل متوقف می شود و همان مقدار که باز شده می ماند. متد stop را برای تمام انیمیشن ها و افکت ها می توان استفاه کرد.

ساختار کلی متد stop به شکل زیر است:

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

این متد دو پارامتر اختیاری به نام stop all و go to end می گیرد. این دو پارامتر مقدارهای true و false را دریافت می کنند.

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

پارامتر go to ends به این معنی است که با اجرای متد stop انیمیشن به سرعت و بدون توقف پایان یابد نه اینکه در حال اجرا متوقف شود. مقدار آن نیز به صورت پیشفرض بر روی false است.

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

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

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

همانطور که اشاره کردیم بسیاری از متدهای مربوط به افکت ها پارامتری اختیاری به نام callback دریافت می کنند. این پارامتر به صورت function (تابع) است که بعد از تمام شدن کامل اجرای افکت، انجام می شود.

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

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

در این کد با کلیک بر روی دکمه پاراگراف های ما مخفی می شود و سرعت آن نیز بر روی slow تنظیم شده است. بعد از مخفی شدن کامل پاراگراف ها، function مربوط به callback در جی کوئری اجرا شده و alert به کاربر نمایش داده می شود که در آن پیامی نوشته شده است.

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

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

در این نمونه پیام قبل از اجرای کامل مخفی شدن به کاربر نمایش داده خواهد شد.

دستورهای زنجیره ای در جی کوئری

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

یکی از فواید مهم این دستور این است که مرورگر دیگر لازم نیست چند بار عنصر مورد نظر را پیدا کند و از selector ها یک بار استفاده می کنیم. برای زنجیر کردن چند دستور به هم دیگر شما فقط باید آن ها را به هم دیگر اضافه کنید و برای این کار ما از نقطه استفاده می کنیم.

در مثال زیر می بینید که یک بار عنصری با آی دی p1 را انتخاب کردیم، سپس در 3 دستور ابتدا ویژگی های css آن را دارای رنگ قرمز و دو افکت slid up و slid down را با سرعت 2 ثانیه، برای آن تنظیم کرده ایم. حال اگر این خط کد را در function یک رویداد کلیک قرار دهیم، با کلیک بر روی آن عنصر ابتدا رنگ آن به قرمز تغییر می کند، سپس از پایین به بالا به مدت 2 ثانیه جمع می شود و بعد، از بالا به پایین به مدت 2 ثانیه بازمی شود.

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

همچنین توجه داشته باشید که ممکن است در استفاده از دستورات chaining حجم یک خط کد بسیار زیاد شود و شما نیاز داشته باشید که به خط بعد بروید. شما می توانید برای این کار بعد از هر دستور و هر نقطه یک enter بزنید و به خط بعد بروید.

مانند نمونه ی زیر که همان دستور بالا را در سه خط کد نوشته ایم.

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

این ویژگی جی کوئری است که فضاهای خالی را از بین می بیرد و به آن ها توجه نمی کند.

در این قسمت از دوره آموزشی کتابخانه جی کوئری به سه مبحث پایانی افکت ها یعنی stop ،callback ،chaining پرداختیم. در قسمت ها بعدی به مباحث مربوط به سند وب و ایجاد تغییر در عناصر آن می پردازیم.