1. افکت‌های نمایش و مخفی‌سازی پایه

در jQuery برای نمایش و مخفی‌کردن المان‌ها سه متد اصلی داریم:

$(".selector").hide(speed); $(".selector").show(speed); $(".selector").toggle(speed);

• hide() → مخفی‌سازی المان.
• show() → نمایش المان.
• toggle() → تغییر وضعیت (اگر مخفی بود، نمایش می‌دهد و برعکس).
• speed → مدت زمان انیمیشن: "slow" (~600ms)، "fast" (~200ms)، یا عدد بر حسب میلی‌ثانیه.

2. افکت‌های محو شدن (Fade Effects)

مناسب برای ایجاد افکت تدریجی در شفافیت (opacity).

$(".selector").fadeOut(speed); $(".selector").fadeIn(speed); $(".selector").fadeToggle(speed); $(".selector").fadeTo(speed, opacity);

• fadeOut() → محو کردن.
• fadeIn() → ظاهر کردن با محو شدن تدریجی.
• fadeToggle() → تغییر وضعیت محو/نمایش.
• fadeTo() → تنظیم شفافیت به مقدار دلخواه (عدد بین 0 و 1).

مثال:

$(".box").fadeTo("slow", 0.2); // شفافیت را به 20% کاهش می‌دهد 

3. افکت‌های کشویی (Slide Effects)

مناسب برای نمایش و مخفی‌سازی به شکل بالا/پایین رفتن.

$(".selector").slideUp(speed); $(".selector").slideDown(speed); $(".selector").slideToggle(speed);

• slideUp() → جمع شدن المان به سمت بالا.
• slideDown() → باز شدن المان به سمت پایین.
• slideToggle() → تغییر وضعیت باز/بسته.

4. مثال عملی این جلسه

HTML:

html

<span class="c1">مخفی ساز</span> <span class="c2">نمایان ساز</span> <span class="c3">همه کاره</span> <span class="c4">تست</span> <div class="test1"></div>

CSS:

css

.test1 {  width: 50px;  height: 50px;  background-color: blue;  margin: 200px; } span {  width: 200px;  height: 40px;  color: #fff;  padding: 10px;  margin: 10px; } .c1 { background-color: blue; } .c2 { background-color: red; } .c3 { background-color: green; } .c4 { background-color: gray; }

jQuery (افکت کشویی در کد فعال):

$(document).ready(function () {  $(".c1").hover(function () {    $(".test1").slideUp();  });  $(".c2").click(function () {    $(".test1").slideDown();  });  $(".c3").click(function () {    $(".test1").slideToggle();  }); });

5. نکات مهم

• همیشه کد jQuery رو داخل $(document).ready() یا معادل کوتاه آن $() بنویسید تا بعد از بارگذاری کامل DOM اجرا شود.
• سرعت (speed) اختیاری است، اما بهتر است برای داشتن افکت نرم استفاده شود.
• می‌توان از توابع callback به عنوان پارامتر دوم متدها استفاده کرد تا بعد از اتمام انیمیشن، کد دلخواه اجرا شود.
• تفاوت بین افکت‌ها:
  • hide/show/toggle → تغییر مستقیم نمایش المان.
  • fade → تغییر شفافیت (opacity).
  • slide → تغییر ارتفاع المان به شکل باز و بسته شدن.