در این مقاله افکت محو شدن را بررسی خواهیم کرد.
متد های محو شدگی در جی کوئری
با جی کوئری شما میتوانید یک تگ را محو کنید و آن را کاملا غیر قابل روئیت بنماید.
جی کوئری برای محو کردن از متد های زیر استفاده می کند.
fadeIn() fadeOut() fadeToggle() fadeTo()
متد fadeIn():
این متد برای ظاهر کردن تگی است که در حال حاضر مخفی است.
نکته : گوگل به منابع سایت ما دسترسی دارد و میتواند درک کند، که هدف ما از مخفی کردن یک المان دادن افکت به آن است و نمره منفی به آن تعلق نمی گیرید، ولی اگر به عناصر خود بی دلیل استایل مخفی بودن بدهید ، گوگل تصور می کند که شما برای موتور جستجو محتوایی تهیه کرده اید، که برای کاربر غیر قابل دیدن است. و به این ترتیب شما نمره منفی خواهید گرفت، بنابراین از عناصر مخفی جز برای ایجاد افکت حرکتی استفاده نکنید. این مطلب در کنفرانس سالانه گوگل در سال 2014 بطور رسمی اعلام شده است.
نحوه استفاده از این متد :
$(selector).fadeIn(speed,callback);
پارامترSpeed زمان افکت را تعیین می کند. این پارامتر میتواند مقادیر slow", "fast", یا milliseconds باشد. اگر درس قبل را مطالعه کرده باشید مقادیر را با مثال توضیح داده بودیم.
پارامترcallback یک عملگر است که بعد از اتمام افکت به اجرا گذاشته میشود.
مثال زیر نحوه استفاده از متد fadeIn() را نشان میدهد:
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
مشاهده نتیجه
متد fadeOut()
این متد برای مخفی کردن یک تگ استفاده می شود.
نحوه استفاده از متد fadeOut() :
$(selector).fadeOut(speed,callback);
پارامتر Speed زمان افکت را برحسب مقدار بصورت : "slow", "fast" یا میلی ثانیه نشان میدهد.
پارامتر Callback یک عملگر است که بعد از اتمام افکت به اجرا در میاید.
مثال زیر نحوه استفاده از متد fadeOut() را نشان میدهد:
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
مشاهده نتیجه
متد fadeToggle()
این متد میتواند با یک خط کد، تگی را آشکار و یا پنهان کند . به این ترتیب که اگر تگ مخفی بود آشکار شده و اگر آشکار باشد مخفی خواهد شد.
نحوه استفاده از این متد :
$(selector).fadeToggle(speed,callback);
پارامتر Speed زمان افکت را مشخص می کند. و میتواند مقادیر : "slow", "fast" و یا عددی بر حسب میلی ثانیه را بگیرید.
پارامتر callback یک عملگر است که بعد از به پایان رسیدن افکت به اجرا در می آید .
در مثال زیر نحوه استفاده از این متد توضیح داده شده است:
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
مشاهده نتیجه
متد Fadeto()
این متد به شما اجازه میدهد عددی را بین 0 و 1 برای نتیجه نهایی محو شدن انتخاب کنید.
نحوه استفاده از این متد:
$(selector).fadeTo(speed,opacity,callback);
پارامتر Speed زمان افکت را مشخص می کند. و میتواند مقادیر : "slow", "fast" و یا عددی بر حسب میلی ثانیه را بگیرید.
پارامتر opacity همان طور که از نامش پیداست عددی را برای میزان شفافیت تگ بعد از اتمام افکت مشخص می کند.
پارامتر callback یک عملگر است که بعد از به پایان رسیدن افکت به اجرا در می آید .
مثال زیر نحوه استفاده از این افکت را نشان میدهد :
$("button").click(function(){
$("#div1").fadeTo("slow", 0.15);
$("#div2").fadeTo("slow", 0.4);
$("#div3").fadeTo("slow", 0.7);
});
مشاهده نتیجه
براي بهره مندي از مشاوره تخصصي در زمینه طراحی سایت با شرکت سارگون تماس بگيريد