میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

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

۶۱ / ۱۰۰

سلام به شما همراهان و دوستان محترم سایت آموزشی و فروشگاهی مدرسه کدنویسی به دوره ی آموزش jQuery (جی کوئری) خوش آمدید. در این دوره قصد داریم شما را با افکت‌ها (اسلاید) در جی کوئری jQuery آشنا کرده نحوه استفاده از آن را به شما آموزش دهیم پس با من همراه باشید.

 


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

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

متد 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);

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

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

 


امیدواریم آموزش افکت‌ها (اسلاید) در جی کوئری jQuery نیز برای شما مفید واقع شده باشد و ادامه آموزش  آشنایی با css را دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.

 

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟