قسمت چهارم: افکت‌ها (Fading)

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

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

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

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

افکت fadeIn

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

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

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

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

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

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

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

افکت fadeOut

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

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

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

$("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 می افتد و در خط سوم این اتفاق 3 ثانیه زمان می برد.

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

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

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

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

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

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

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

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

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

برای مثال در نمونه زیر می بینیم که بعد از کلیک بر روی دکمه تابعی اجرا می شود که در آن شفافیت عنصر اول 0.15، شفافیت عنصر دوم 0.4 و شفافیت عنصر سوم 0.7 تعیین می گردد و هر سه این افکت ها به صورت slow انجام می شود.

$("button").click(function(){
  $("#div1").fadeTo("slow", 0.15);
  $("#div2").fadeTo("slow", 0.4);
  $("#div3").fadeTo("slow", 0.7);
});

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

منبع: سایت W3Schools