قسمت سوم: افکت‌ها (hide و show)

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

افکت چیست؟

افکت ها همان انیمیشن ها و تغییراتی هستند که می توان در عناصر مختلف سند 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 عدد 1000 را انتخاب کنیم به این معنی است که 1 ثانیه زمان می برد تا عنصر مورد نظر مخفی یا پنهان گردد و اگر عدد 2000 را قرار دهیم به همین صورت 2 ثانیه زمان می برد تا عنصر مورد نظر مخفی گردد.

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

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

2. پارامتر 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 عددی بر مبنای میلی ثانیه است (یعنی عدد 1000 میلی ثانیه به معنای 1 ثانیه می باشد)

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

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

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

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

منبع: سایت W3Schools