التأثيرات الأساسية

<div id="box" style="display: none;">مرحبا بالعالم!</div>
<button id="showBtn">إظهار الصندوق</button>

<script>
$(document).ready(function() {
    $("#showBtn").click(function() {
        $("#box").show(); // إظهار فوري
    });
});
</script>

// إظهار مع رسوم متحركة
$("#box").show(1000); // رسوم متحركة لمدة ثانية واحدة
$("#box").show("slow"); // رسوم متحركة بطيئة
$("#box").show("fast"); // رسوم متحركة سريعة

// مع دالة استدعاء
$("#box").show(500, function() {
    alert("اكتملت الرسوم المتحركة!");
});

<button id="hideBtn">إخفاء الصندوق</button>

<script>
$("#hideBtn").click(function() {
    $("#box").hide(800); // إخفاء خلال 800 ميلي ثانية
});

// إخفاء عناصر متعددة
$(".alerts").hide("fast");

// إخفاء مع دالة استدعاء
$("#message").hide(500, function() {
    console.log("تم إخفاء الرسالة");
});
</script>

<div id="content">
    <p>يمكن تبديل هذا المحتوى</p>
</div>
<button id="toggleBtn">تبديل المحتوى</button>

<script>
$(document).ready(function() {
    $("#toggleBtn").click(function() {
        $("#content").toggle(600);
    });
});
</script>

// إظهار تدريجي للعنصر المخفي
$("#box").fadeIn(1000);

// إخفاء تدريجي للعنصر المرئي
$("#box").fadeOut(500);

// تبديل التلاشي
$("#box").fadeToggle(800);

// التلاشي إلى شفافية محددة
$("#box").fadeTo(1000, 0.5); // التلاشي إلى 50٪ شفافية

<div id="overlay" style="display:none;">
    <div id="modal">
        <h3>مرحباً!</h3>
        <p>هذا مربع حوار منبثق</p>
        <button id="closeModal">إغلاق</button>
    </div>
</div>
<button id="openModal">فتح المربع المنبثق</button>

<script>
$(document).ready(function() {
    // فتح المربع المنبثق
    $("#openModal").click(function() {
        $("#overlay").fadeIn(400);
    });

    // إغلاق المربع المنبثق
    $("#closeModal").click(function() {
        $("#overlay").fadeOut(400);
    });
});
</script>

// استدعاء واحد
$("#message").fadeOut(500, function() {
    $(this).remove(); // إزالة العنصر بعد التلاشي
});

// تأثيرات متسلسلة
$("#box").fadeOut(300, function() {
    $(this).text("تم تحديث المحتوى").fadeIn(300);
});

// عناصر متعددة مع استدعاء
$(".notification").each(function() {
    $(this).fadeOut(500, function() {
        console.log($(this).attr("id") + " مخفي");
    });
});

// إيقاف الرسوم المتحركة الحالية
$("#box").stop();

// إيقاف ومسح قائمة الانتظار
$("#box").stop(true);

// إيقاف والقفز إلى النهاية
$("#box").stop(true, true);

// استخدام عملي - منع إزعاج التمرير
$("#box").hover(
    function() {
        $(this).stop().fadeIn(300);
    },
    function() {
        $(this).stop().fadeOut(300);
    }
);

<style>
.gallery-item {
    display: inline-block;
    margin: 10px;
    cursor: pointer;
}
.gallery-item img {
    width: 200px;
    height: 150px;
    object-fit: cover;
}
.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 1000;
}
.overlay img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90%;
    max-height: 90%;
}
</style>

<div class="gallery">
    <div class="gallery-item">
        <img src="photo1.jpg" alt="صورة 1">
    </div>
    <div class="gallery-item">
        <img src="photo2.jpg" alt="صورة 2">
    </div>
</div>

<div class="overlay">
    <img id="lightbox-img" src="" alt="">
</div>

<script>
$(document).ready(function() {
    // فتح عارض الصور
    $(".gallery-item img").click(function() {
        var imgSrc = $(this).attr("src");
        $("#lightbox-img").attr("src", imgSrc);
        $(".overlay").fadeIn(400);
    });

    // إغلاق عارض الصور
    $(".overlay").click(function() {
        $(this).fadeOut(400);
    });
});
</script>