آموزش دستور fade در جی کوئری

دستور fade در جی کوئری (jquery) برای محو کردن یا نمایان کردن عناصر صفحه وب استفاده می شود.

دستور fadeIn :

دستور fadeIn در جی کوئری برای نمایان کردن عنصر محو شده یا پنهان شده استفاده می شود.

دستور fadeIn دارای سرعت های مختلف می باشد که بر اساس میلی ثانیه می باشد. یا می تواند دو مقدار slow و fast بگیرد.

اگر مقدار slow را انتخاب نمایید عنصر به آهستگی نمایان می شود.

اگر مقدار fast را انتخاب نمایید عنصر به سرعت نمایان می شود.

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

دستور fadeOut:

دستور fadeOut در جی کوئری برای پنهان کردن عنصر استفاده می شود. دستور fadeOut دارای سرعت های مختلف برای پنهان شدن می باشد. سرعت بر اساس میلی ثانیه می باشد. همچنین می توانید از مقادیر slow و fast نیز استفاده کنید.

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

دستور fadeToggle :

دستور fadeToggle در جی کوئری برای پنهان یا نمایان کردن عنصر بکار می رود.

با یک بار کلیک ، عنصر پنهان و با کلیک دوم عنصر نمایان می شود.

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

دستور fadeTo :

دستور fadeTo در جی کوئری ، عنصر را تا درصد خاصی پنهان می کند. یعنی می توانیم بگوییم عنصر تا 7 دهم پنهان شود.

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

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax
/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeTo("slow", 0.15);
$("#div2").fadeTo("slow", 0.4);
$("#div3").fadeTo("slow", 0.7);
});
});
</script>
</head>
<body>
<p>Demonstrate fadeTo() with different parameters.</p>
<button>Click to fade boxes</button><br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>

نویسنده : هدایت عباسی

ثبت نظر