با jQuery می توان عناصر را کم کم ناپدید و یا نمایان کرد.
مثال - خودتان امتحان کنید
()fadeIn
این مثال، چگونگی نمایان کردن عناصر را نشان می دهد.
()fadeOut
این مثال، چگونگی محو کردن عناصر را نشان می دهد.
()fadeToggle
این مثال، چگونگی محو یا نمایان کردن عناصر را نشان می دهد.
()fadeTo
این مثال، چگونگی محو کردن کردن عناصر تا یک مقدار مشخص را نشان می دهد.
متدهای محو و یا نمایان کردن عناصر در jQuery
با jQuery می توان یک عنصر را محو و یا نمایان کرد.
متدهایی که برای این منظور در jQuery استفاده می شود:
- ()fadeIn
- ()fadeOut
- ()fadeToggle
- ()fadeTo
متد ()fadeIn
متد ()fadeIn، یک عنصر پنهان را با سرعتی مشخص نمایان می کند.
نحوه استفاده:
پارامترها:
| پارامتر | توضیح |
|---|---|
| speed | اختیاری است، سرعت شفاف شدن را مشخص می کند و می تواند با مقادیر "slow"، "fast" و یا میلی ثانیه مقدار دهی شود. |
| callback | اختیاری است، تابعی است که بعد از اجرای کامل متد ()fadeIn اجرا می شود. (درباره تابع callback در مطالب بعدی بیشتر توضیح داده خواهد شد) |
در مثال زیر، متد ()fadeIn با پارامترهای مختلف نشان داده شده است:
مثال (محو کردن عناصر در jQuery)
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
متد ()fadeOut
متد ()fadeOut، یک عنصر را با سرعتی مشخص محو می کند.
نحوه استفاده:
پارامترها:
| پارامتر | توضیح |
|---|---|
| speed | اختیاری است، سرعت محو شدن را مشخص می کند و می تواند با مقادیر "slow"، "fast" و یا میلی ثانیه مقدار دهی شود. |
| callback | اختیاری است، تابعی است که بعد از اجرای کامل متد ()fadeOut اجرا می شود. |
در مثال زیر، متد ()fadeOut با پارامترهای مختلف نشان داده شده است:
مثال (محو کردن عناصر در jQuery)
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
متد ()fadeToggle
متد ()fadeToggle، بین متدهای ()fadeIn و ()fadeOut حرکت می کند.
عناصر شفاف را محو و عناصر پنهان را شفاف می کند.
نحوه استفاده:
پارامترها:
| پارامتر | توضیح |
|---|---|
| speed | اختیاری است، سرعت محو یا نمایان شدن را مشخص می کند و می تواند با مقادیر "slow"، "fast" و یا میلی ثانیه مقدار دهی شود. |
| callback | اختیاری است، تابعی است که بعد از اجرای کامل متد ()fadeIn یا ()fadeOut اجرا می شود. |
در مثال زیر، متد ()fadeToggle با پارامترهای مختلف نشان داده شده است:
مثال (محو کردن عناصر در jQuery)
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
متد ()fadeTo
متد ()fadeTo، یک عنصر را تا یک مقدار مشخص، محو می کند. (مقداری بین 0 و 1)
نحوه استفاده:
پارامترها:
| پارامتر | توضیح |
|---|---|
| speed | الزامی است، سرعت محو شدن را مشخص می کند و می تواند با مقادیر "slow"، "fast" و یا میلی ثانیه مقدار دهی شود. |
| opacity | الزامی است، میزان شفافیت را مشخص می کند و عددی بین 0 و ا است. |
| callback | اختیاری است، تابعی است که بعد از اجرای کامل متد ()fadeTo اجرا می شود. |
در مثال زیر، متد ()fadeTo با پارامترهای مختلف نشان داده شده است:
مثال (محو کردن عناصر در jQuery)
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
میخواستم بپرسم با استفاده از جاوا اسکریپت هم میتوان اینکارها رو انجام داد؟
مثلا برای محو کردن یه عنصر؟ اگر میشود چگونه؟؟
jQuery در واقع از همون جاوااسکریپیت برای انجام کارهای خودش استفاده می‌کنه و به قدری گسترده هست که دیگه کمتر کسی سمت جاوااسکریپت میره.
کدی که با jQuery میشه در یه خط نوشت، شاید در جاوااسکریپت با چند خط بشه. مخفی کردن عناصر در جاوااسکریپت هم شدنی هست، ولی مطمئنا کمی پیچیده‌تر از jQuery هست. کدهای آماده در اینترنت زیاد هست. با کمی جستجو می‌تونید چند نمونه گیر بیارید.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$("p").fadeOut()
});
$(".btn2").click(function(){
$("p").fadeIn();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Fade out</button>
<button class="btn2">Fade in</button>
</body>
</html>