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

افکت‌ها (hide و show) در جی کوئری

۲۱ / ۱۰۰

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


افکت چیست؟

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

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


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

متدهای Hide & show

با متدهای Hide & show در جی کوئری شما می توانید یک عنصر html را مخفی و یا آن را نمایش دهید.

در مثال زیر می بینید که ما ابتدا عنصری با آی دی hide را انتخاب می کنیم و سپس با استفاده از متد click تابعی را برای آن تعریف می کنیم که در صورت کلیک کردن روی آن عنصر تمامی تگ های p و پاراگراف ها مخفی می شوند و دربخش بعدی هم می بینیم برای عنصری با آی دی show با استفاده از متد click تابعی تعریف کردیم که با کلیک بر روی آن تمامی پاراگراف ها نمایش داده می شوند :

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

متدهای Hide & show دقیقا برعکس یکدیگر عمل می کنند؛ به اینصورت که با متد hide عنصر مخفی شده و با استفاده از متد show مجددا آن را به کاربر نمایش می دهیم.

 

ساختار کلی استفاده از متد Hide & show

 

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

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

 

در پرانتز روبروی متد Hide & show می توان دو پارامتر (ورودی) را به آن ها بدهیم:

  1. پارامتر speed (سرعت): این پارامتر عددی بر مبنای m/s دریافت می کند. برای مثال اگر در پرانتز روبروی متد hide عدد ۱۰۰۰ را انتخاب کنیم به این معنی است که ۱ ثانیه زمان می برد تا عنصر مورد نظر مخفی یا پنهان گردد و اگر عدد ۲۰۰۰ را قرار دهیم به همین صورت ۲ ثانیه زمان می برد تا عنصر مورد نظر مخفی گردد.

در مثال زیر می بینید که برای دکمه html یک متد click تعریف کرده ایم و تابعی را برای آن تعریف کرده ایم که در صورت کلیک به روی دکمه تمامی تگ های p یا پاراگراف های مخفی شوند و مخفی شدن آن ها ۱ ثانیه طول بکشد.

$("button").click(function(){
  $("p").hide(1000);
});
  1. پارامتر callback: با این پارامتر در آینده بیشتر آشنا می شویم.


Toggle

با استفاده از این متد شما می توانید بین مخفی بودن یا نمایش دادن یک عنصر تغییر وضعیت ایجاد کنید یعنی اگر عنصر مخفی و hidden است آن را نمایش دهید و در صورتی که عنصر مورد نظر آشکار یا show است آن را مخفی نمایید.

در واقع با استفاده از این متد شما به جای نوشتن دو متد Hide & show برای یک عنصر، از یک متد استفاده می کنید.

برای مثال در نمونه زیر برای دکمه خود متدی را تعریف کرده ایم که در تابع آن تمامی تگ های p متد toggle دریافت کرده اند. یعنی اگر تگ های p ما در حال نمایش باشند پنهان می شوند و درصورتی که تگ های p آشکار باشند ، پنهان می شوند و بین این دو حالت تغییر وضعیت میدهند:

$("button").click(function(){  
 $("p").toggle(); 
});

ساختار کلی متد toggle

 

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

 

متد toggle نیز مانند متد Hide & show می تواند دو پارامتر اختیاری می گیرد: اولی speed و دومی callback.

همانگونه که در همین مقاله گفت شد speed عددی بر مبنای میلی ثانیه است (یعنی عدد ۱۰۰۰ میلی ثانیه به معنای ۱ ثانیه می باشد)

همچنین باید بدانید که speed علاوه بر مقادیر عددی بر مبنای میلی ثانیه می تواند مقادیری مانند slow و fast هم دریافت کند که در این صورت سرعت نمایش آن ها به صورت اتوماتیک تنظیم شود.

پارامتر اختیاری دیگری که برای متدهای Hide و show و toggle وجود دارد، callback است که در آن یک function یا تابع دریافت می شود که آن تابع درست بعد از اجرا شدن متد اجرا می شود.

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


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

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

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

×

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

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

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

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