سبد (0)

تبلیغات

محو کردن عناصر در jQuery

با jQuery می توان عناصر را کم کم ناپدید و یا نمایان کرد.


مثال

مثال - خودتان امتحان کنید

()fadeIn
این مثال، چگونگی نمایان کردن عناصر را نشان می دهد.

()fadeOut
این مثال، چگونگی محو کردن عناصر را نشان می دهد.

()fadeToggle
این مثال، چگونگی محو یا نمایان کردن عناصر را نشان می دهد.

()fadeTo
این مثال، چگونگی محو کردن کردن عناصر تا یک مقدار مشخص را نشان می دهد.


متدهای محو و یا نمایان کردن عناصر در jQuery

با jQuery می توان یک عنصر را محو و یا نمایان کرد.

متدهایی که برای این منظور در jQuery استفاده می شود:

  • ()fadeIn
  • ()fadeOut
  • ()fadeToggle
  • ()fadeTo

متد ()fadeIn

متد ()fadeIn، یک عنصر پنهان را با سرعتی مشخص نمایان می کند.

نحوه استفاده:

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

پارامترها:

پارامتر توضیح
 speed

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

callback

اختیاری است، تابعی است که بعد از اجرای کامل متد ()fadeIn اجرا می شود. (درباره تابع callback در مطالب بعدی بیشتر توضیح داده خواهد شد)

در مثال زیر، متد ()fadeIn با پارامترهای مختلف نشان داده شده است:

مثال (محو کردن عناصر در jQuery)

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});
خودتان امتحان کنید »

متد ()fadeOut

متد ()fadeOut، یک عنصر را با سرعتی مشخص محو می کند.

نحوه استفاده:

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

پارامترها:

پارامتر توضیح
 speed

اختیاری است، سرعت محو شدن را مشخص می کند و می تواند با مقادیر "slow"، "fast" و یا میلی ثانیه مقدار دهی شود.

callback

اختیاری است، تابعی است که بعد از اجرای کامل متد ()fadeOut اجرا می شود.

در مثال زیر، متد ()fadeOut با پارامترهای مختلف نشان داده شده است:

مثال (محو کردن عناصر در jQuery)

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});
خودتان امتحان کنید »

متد ()fadeToggle

متد ()fadeToggle، بین متدهای ()fadeIn و ()fadeOut حرکت می کند.

عناصر شفاف را محو و عناصر پنهان را شفاف می کند.

نحوه استفاده:

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

پارامترها:

پارامتر توضیح
 speed

اختیاری است، سرعت محو یا نمایان شدن را مشخص می کند و می تواند با مقادیر "slow"، "fast" و یا میلی ثانیه مقدار دهی شود.

callback

اختیاری است، تابعی است که بعد از اجرای کامل متد ()fadeIn یا ()fadeOut اجرا می شود.

در مثال زیر، متد ()fadeToggle با پارامترهای مختلف نشان داده شده است:

مثال (محو کردن عناصر در jQuery)

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});
خودتان امتحان کنید »

متد ()fadeTo

متد ()fadeTo، یک عنصر را تا یک مقدار مشخص، محو می کند. (مقداری بین 0 و 1)

نحوه استفاده:

$(selector).fadeTo(speed,opacity,callback);

پارامترها:

پارامتر توضیح
 speed

الزامی است، سرعت محو شدن را مشخص می کند و می تواند با مقادیر "slow"، "fast" و یا میلی ثانیه مقدار دهی شود.

opacity

الزامی است، میزان شفافیت را مشخص می کند و عددی بین 0 و ا است.

callback

اختیاری است، تابعی است که بعد از اجرای کامل متد ()fadeTo اجرا می شود.

در مثال زیر، متد ()fadeTo با پارامترهای مختلف نشان داده شده است:

مثال (محو کردن عناصر در jQuery)

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});
خودتان امتحان کنید »

jQuery Effects Reference

For a complete overview of all jQuery effects, please go to our jQuery Effect Reference.

دیدگاه‌ها  

+2 # Am 1394-11-12 12:27
با عرض سلام و خسته نباشید و تشکر از سایت خوبتون...خدا خیرتون بده...
میخواستم بپرسم با استفاده از جاوا اسکریپت هم میتوان اینکارها رو انجام داد؟
مثلا برای محو کردن یه عنصر؟ اگر میشود چگونه؟؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # مهرداد صلاحی 1394-11-12 21:19
با سلام و تشکر.
jQuery در واقع از همون جاوااسکریپیت برای انجام کارهای خودش استفاده می‌کنه و به قدری گسترده هست که دیگه کمتر کسی سمت جاوااسکریپت میره.
کدی که با jQuery میشه در یه خط نوشت، شاید در جاوااسکریپت با چند خط بشه. مخفی کردن عناصر در جاوااسکریپت هم شدنی هست، ولی مطمئنا کمی پیچیده‌تر از jQuery هست. کدهای آماده در اینترنت زیاد هست. با کمی جستجو می‌تونید چند نمونه گیر بیارید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # mm 1394-05-11 17:16
میخوام که با استفاده از متد fade in یه عکس رو ظاهر کنم کدش چجوری میشه؟ در ضمن سایتتون عالیه
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مهرداد صلاحی 1394-11-12 21:14
کد زیر یه سمپل خیلی ساده از 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>
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # mohsen moardi 1393-11-05 15:29
ببخشيد تو بياموز هاي قبلي ميشد با hide و show پنهان و نمايان كرد....فرقشون با fade چيه؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+9 # امیر پهلوان صادق 1393-11-06 07:30
هر دو متد ()hide و ()fadeOut بتدریج opacity یا شفافیت عنصر مورد نظر را صفر کرده و نهایتاً خصوصیت display را با مقدار "none" تنظیم می کنند. اما متد ()hide علاوه بر این، خصوصیت های height و width را نیز صفر خواهد کرد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # دادمهر صفاييان پور 1393-07-27 09:53
با عرض سلام و خسته نباشید در قسمت خودتان امتحان کنید بعد از ویرایش کد ها اجرا نمیشود ممنون از سایت مفیدتون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # امیر پهلوان صادق 1393-07-28 08:48
سلام، چک کردم، مشکلی وجود نداشت، احتمالاً اشتباه تایپی بوده
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # دادمهر صفاييان پور 1393-07-28 10:36
فکر نکنم اشکال تایپی باشه چون همون تغییرات در w3s اعمال میشه . در هر صورت از سایت خوبتون تشکر میکنم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی