قسمت پنجم: افکت‌ها (اسلاید)

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

افکت های اسلاید در جی کوئری

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

متد slideDown در جی کوئری

این متد برای باز کردن یک عنصر به صورت کشویی از بالا به پایین استفاده می شود. (دقیقا مانند بازشدن پرده نمایش از بالا به پایین)

ساختار کلی این متد نیز مانند متدهای قبلی به اینصورت است که می تواند پارامترهای speed و callback را دریافت کنند. همانطور قبلا گفتیم سرعت می تواند slow/fast یا عدد بر مبنای میلی ثانیه باشد.

$(selector).slideDown(speed,callback);

در مثال زیر با کلیک بر روی عنصر با آی دی flip تابعی اجرا می شود که در آن عنصری با آی دی panel از بالا به پایین به صورت کشویی اسلاید می شود.

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

متد slideUp در جی کوئری

این متد برای بستن یک متد از پایین به بالا و به صورت کشویی استفاده می شود.

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

$(selector).slideUp(speed,callback);

در مثال زیر با کلیک بر روی عنصر تابعی اجرا می شود که در آن عنصر با آی دی panel از پایین به بالا به صورت کشویی جمع می شود.

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

متد slideToggle در جی کوئری

مانند افکت های fading و hide و show در اسلاید نیز متدی با عنوان slideToggle وجود دارد که ترکیبی از متدهای slid down و slid up است.

یعنی اگر عنصر انتخاب شده در حال نمایش و ظاهر باشد، آن را slidUp می کند و از پایین به بالا جمع می کند و اگر عنصر مورد نظر مخفی باشد آن را slideDown می کند به و صورت کشویی از بالا به پایین باز می کند.

این متد نیز دقیقا مانند slide down و slid up ورودی های speed و callback را دریافت می کند.

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

$(selector).slideToggle(speed,callback);

در مثال زیر با کلیک روی عنصر با آی دی flip تابعی اجرا می شود که در آن عنصر با آی دی panel را slide down و slid up می کند و با استفاده از متد slide Toggle آن را باز و بسته می کند و بین این دو تغییر وضعیت ایجاد می نماید. به این صورت که اگر عنصر انتخاب شده پنهان بود آن را به صورت کشویی از بالا به پایین باز می کند و اگر عنصر، باز شده بود آن را به همان شکل می بندد و همواره بین این دو حالت سوییچ می نماید.

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

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

شما می توانید با استفاده از جی کوئری انیمیشن های مخصوص خود را تعریف کنید و به جای استفاده از انیمیشن ها و افکت های پیشفرض، افکت مورد نظر خود را برای جی کوئری تعریف کنید. اگر شما می خواهید به جای استفاده از انیمیشن ها و افکت های پیش فرض این کتابخانه برای خود انیمیشن های اختصاصی بسازید و به عنصر انتخاب شده اختصاص دهید باید از متد انیمیت در جی کوئری استفاده کنید

متد animate

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

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

$(selector).animate({params},speed,callback);

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

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

در قسمت بعدی بیشتر با این پارامتر آشنا خواهیم شد و برای آن مثال ها و نمونه هایی خواهیم آورد تا به صورت کامل با آن آشنا شویم.

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