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

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

۲۱ / ۱۰۰

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

 


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

با استفاده از جی کوئری شما می توانید عناصر را محو کنید یا از حالت محو بیرون آورید. Fade شدن به معنی آرام آرام محو شدن است. با استفاده از متدهای Fading در جی کوئری شما می توانید عناصر را محو یا نمایش دهید.

این افکت به طور کلی شامل دو متد fade in و fade out می شود که در زیر به تفصیل توضیح داده ام:

افکت fadeIn

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

این افکت همچون سه افکت Hide و Show و Toggle، دو پارامتر را به صورت اختیاری دریافت می کند. پارامتر speed که عدد بر مبنای میلی ثانیه یا هر کدام از مقادیر (slow/fast) را می تواند دریافت کند و پارامتر callback تابعی است که بلافاصله بعد از اجرا شدن افکت اجرا می شود.

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

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

در این تابع برای ۳ عنصر با ۳ آی دی متفاوت، ۳ افکت fadeIn را در نظر گرفته ایم.

$("button").click(function(){  
  $("#div1").fadeIn(); 
  $("#div2").fadeIn("slow"); 
  $("#div3").fadeIn(3000);
});

افکت اول fade in بدون هیچ پارامتری است یعنی افکت fading به صورت عادی و با پیش فرض های جی کوئری انجام می شود. در خط بعدی به متد خود پارامتر slow را دادیم که در این صورت افکت به صورت آهسته انجام می شود و در قسمت بعدی به پارامتر speed خود مقدار ۳۰۰۰ میلی ثانیه (۳ ثانیه) را داده ایم به این معنی که ۳ ثانیه طول می کشد تا عنصر ظاهر گردد.

افکت fadeOut

این افکت در زمانی استفاده می شود که بخواهیم عنصری را به آهستگی محو کنیم و ساختار کلی آن دقیقا مانند افکت fade in است با این تفاوت که عنصر را به جای ظاهر کردن محو می کند. این افکت مانند افکت های گذشته دو پارامتر speed و callback را دریافت می کند.

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

در مثال زیر نیز مانند مثال قبل می بینیم که به یک دکمه، متد click را اختصاص داده ایم و سپس در تابع آن ۳ متد fade out را تعریف کرده ایم که در اولی عنصر به طور پیشفرض محو می شود، در دومی به صورت slow محو می گردد و در سومین حالت ۳ ثانیه زمان می برد تا عنصر محو شود.

$("button").click(function(){  
 $("#div1").fadeOut();  
 $("#div2").fadeOut("slow");
 $("#div3").fadeOut(3000);
});

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

این متد ترکیبی از متدهای fade in و fade out می باشد و در صورتی که عنصر ما مخفی باشد آن را fade in می کند و در صورتی که عنصر ما آشکار باشد آن را fade out و محو می کند (دقیقا مانند متد Toggle که ترکیبی از hide و show بود)

این متد نیز دقیقا مانند متدهای قبل دو پارامتر speed و callback را دریافت می کند.

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

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

$("button").click(function(){ 
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

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

این متد، عنصر را به یک opacity یا شفافیت مشخص می رساند. این شفافیت را با یک عدد بین ۰ و ۱ نمایش می دهیم. یعنی عدد ۰ به شفافیت کامل اطلاق می شود که در آن عنصر کاملا محو است. عدد ۱ نیز به شرایطی اطلاق می گردد که عنصر کاملا آشکار است. عددهای ما بین ۰ و ۱ به حالت های مختلف opacity اشاره دارد.

این متد سه ورودی یا پارامتر دریافت می کند:

  1. پارامتر speed
  2. پارامتر callback
  3. پارامتر opacity

با پارامترهای callback و speed آشنایی دارید.

پارامتر speed می تواند مانند مثال های قبل ۳ مقدار slow ,fast یا عدد بر مبنای میلی ثانیه دریافت کند.

callback نیز همان تابعی است که بلافاصله بعد از اجرای افکت، اجرا می شود.

opacity همان مقدار شفافیتی است که می خواهیم بعد از اجرای افکت برای عنصر ما مشخص گردد.

برای مثال در نمونه زیر می بینیم که بعد از کلیک بر روی دکمه تابعی اجرا می شود که در آن شفافیت عنصر اول ۰٫۱۵، شفافیت عنصر دوم ۰٫۴ و شفافیت عنصر سوم ۰٫۷ تعیین می گردد و هر سه این افکت ها به صورت slow انجام می شود.

$("button").click(function(){
   $("#div1").fadeTo("slow", ۰٫۱۵);
   $("#div2").fadeTo("slow", ۰٫۴); 
   $("#div3").fadeTo("slow", ۰٫۷); 
});

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

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

 

 

ارسال دیدگاه

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

×

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

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

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

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