محو کردن عناصر در jQuery
با 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 Effects Reference
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 21194
دیدگاه‌ها
با عرض سلام و خسته نباشید و تشکر از سایت خوبتون...خدا خیرتون بده...
میخواستم بپرسم با استفاده از جاوا اسکریپت هم میتوان اینکارها رو انجام داد؟
مثلا برای محو کردن یه عنصر؟ اگر میشود چگونه؟؟
با سلام و تشکر.
jQuery در واقع از همون جاوااسکریپیت برای انجام کارهای خودش استفاده می‌کنه و به قدری گسترده هست که دیگه کمتر کسی سمت جاوااسکریپت میره.
کدی که با jQuery میشه در یه خط نوشت، شاید در جاوااسکریپت با چند خط بشه. مخفی کردن عناصر در جاوااسکریپت هم شدنی هست، ولی مطمئنا کمی پیچیده‌تر از jQuery هست. کدهای آماده در اینترنت زیاد هست. با کمی جستجو می‌تونید چند نمونه گیر بیارید.
میخوام که با استفاده از متد fade in یه عکس رو ظاهر کنم کدش چجوری میشه؟ در ضمن سایتتون عالیه
کد زیر یه سمپل خیلی ساده از fadein و fadeout هست. از fadeout برای مخفی کردن و از fadein برای ظاهر ساختن عنصر موردنظر استفاده میشه.
<!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&q uot;).click(fun ction(){
$("p" ).fadeOut()
});
$(".btn2&q uot;).click(fun ction(){
$("p" ).fadeIn();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</ p>
<button class="btn 1">Fade out</button& gt;
<button class="btn 2">Fade in</button>
</body>
</html>
ببخشيد تو بياموز هاي قبلي ميشد با hide و show پنهان و نمايان كرد....فرقشون با fade چيه؟
هر دو متد ()hide و ()fadeOut بتدریج opacity یا شفافیت عنصر مورد نظر را صفر کرده و نهایتاً خصوصیت display را با مقدار "none" تنظیم می کنند. اما متد ()hide علاوه بر این، خصوصیت های height و width را نیز صفر خواهد کرد.
با عرض سلام و خسته نباشید در قسمت خودتان امتحان کنید بعد از ویرایش کد ها اجرا نمیشود ممنون از سایت مفیدتون
سلام، چک کردم، مشکلی وجود نداشت، احتمالاً اشتباه تایپی بوده
فکر نکنم اشکال تایپی باشه چون همون تغییرات در w3s اعمال میشه . در هر صورت از سایت خوبتون تشکر میکنم