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

هدایت عباسی آموزش جی کوئری

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

دانلود فیلم و آموزش ویدئویی دستور Fade . در این فیلم با دستور fade در جی کوئری آشنا می شوید.

چنانچه مشکلی در اجرای فیلم دارید از مرورگر فایرفاکس استفاده نمایید یا روی لینک زیر کلیک نمایید.

مشاهده یا دانلود فیلم بالا

آموزش متدهای fadeIn و fadeOut و fadeToggle و fadeTo همراه با مثال و توضیحات کامل. کدها همه تست شده می باشند کافی است آنها را در یک فایل html ذخیره کرده و اجرا نمایید تا نتیجه را ببینید.

در این بخش قصد داریم با دستورات fade آشنا شویم.

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

در این بخش از آموزش جاوا اسکریپت و جی کوئری از تاپ سایت 98 به سراغ آموزش متد fadeout در جی کوئری میرویم.

از دستور fadeout در جی کوئری برای مخفی کردن یا حذف کردن یک عنصر استفاده میشود.

سینتکس متد fadeout

ابتدا با سینتکس متد fadeout آشنا می شویم.

در بخش اول علامت $ و سپس سلکتور را می نویسیم و سپس دستور یا متد fadeout و در پرانتز نیز می توانیم سرعت و callback را بنویسیم.

پارامتر سرعت اختیاری است و طول مدت اثر را مشخص می کند.

پارامتر callback اختیاری است و یک تابع است که پس از اتمام محو شدن اجرا می شود.

این می تواند مقادیر زیر را داشته باشد: آهسته ، سریع یا میلی ثانیه.

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

مثال متد fadeout

در این بخش مثال متد fadeout را بررسی می کنیم.

در مثال زیر ما یک تگ h1 را در صفحه قرار داده ایم و با متد fadeout قصد داریم آن را از صفحه محو یا حذف نماییم.

با کلیک روی دکمه ، تگ h1 محو می شود یا از صفحه وب حذف می شود.

کد زیر را در یک فایل با پسوند html ذخیره کرده و اجرا کنید.

حتما یک فایل جی کوئری در کار فایل html قرار داده و نام آن را jquery.js بگذارید.

<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1").fadeOut();
});
});
</script>
</head>
<body>
<h1>TopSite98</h1>
<button>Click</button>
</body>
</html>

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

متد fadein در جی کوئری برای نمایش عنصر مخفی یا محو شده بکار می رود.

اگر عنصری را با استایل یا متد fadeout مخفی کنیم می توانیم با متد fadein نمایش دهیم.

در بخش زیر با سینتکس متد fadein آشنا می شوید.

مباحثی که در مورد متد fadeout گفتیم برای متد fadein نیز صادق است.

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

مثال متد fadein

در بخش زیر مثال متد fadein را مشاهده می کنید.

در این مثال دو دکمه را مشاهده می کنید . دکمه اول که مانند قبل تگ h1 را محو می کرد و با دکمه دوم که اضافه شده است تگ h1 را دوباره بازمی گردانیم و نمایش داده می شود.

<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#fin").click(function(){
$("h1").fadeOut();
});
$("#fout").click(function(){
$("h1").fadeIn();
});
});
</script>
</head>
<body>
<h1>TopSite98</h1>
<button id="fin">fade In</button>
<button id="fout">fade Out</button>
</body>
</html>

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

متد fadeToggle در جی کوئری کار دو متد بالا را انجام می دهد یعنی با کلیک اول عنصر را مخفی و با کلیک دوم عنصر را نمایان می کند.

متد یا دستور fadeToggle دارای سرعت های مختلف یعنی آهسته ، تند ، میلی ثانیه میباشد.

از این متد در پروژه های مختلف استفاده می شود.

<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#ft").click(function(){
$("h1").fadeToggle();
});
});
</script>
</head>
<body>
<h1>TopSite98</h1>
<button id="ft">fade toggle</button>
</body>
</html>

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

متد fadeTo در جی کوئری زمانی استفاده میشود که می خواهیم عنصر تا حد خاصی محو شود یعنی opacity آن بین صفر تا یک باشد.

اگر بخواهید مثلا یک عنصر به اندازه 50 درصد محو شود می توانیم از متد fadeTo استفاده می کنیم.

مثال متد fadeto

در بخش زیر مثال متد fadeto را مشاهده می کنید.

در این مثال با متد یا دستور fadeTo شفافیت را در حد 50 درصد مشخص کردیم.

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

<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#ft").click(function(){
$("h1").fadeTo("slow",0.5);
});
});
</script>
</head>
<body>
<h1>TopSite98</h1>
<button id="ft">fade to</button>
</body>
</html>

سرعت یا speed

سرعت یا speed در متدهای بالا را در قالب یک مثال توضیح خواهیم داد.

متد fade را می توانیم با سرعت سریع و تند fast و کند slow و یا سرعت 3 ثانیه مخفی یا محو کرد.

<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#ft").click(function(){
$("h1").fadeOut("fast");
$("h2").fadeOut("slow");
$("h3").fadeOut(3000);
});
});
</script>
</head>
<body>
<h1>TopSite98</h1>
<h2>TopSite98</h2>
<h3>TopSite98</h3>
<button id="ft">fade</button>
</body>
</html>

کدها همه تست شده است. می توانید آنها را در فایل html ذخیره کنید و تست نمایید.

امیدواریم از این آموزش لذت برده باشید.

موفق باشید.

اگر به دنبال کار پاره وقت هستید با ما تماس بگیرید.

اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید