تأثيرات الانزلاق

<div id="panel" style="display: none;">
    <p>سينزلق هذا المحتوى للأسفل</p>
</div>
<button id="slideDownBtn">انزلاق للأسفل</button>

<script>
$(document).ready(function() {
    $("#slideDownBtn").click(function() {
        $("#panel").slideDown(); // افتراضي: 400 ميلي ثانية
    });
});
</script>

// مدة مخصصة
$("#panel").slideDown(1000);

// استخدام الكلمات المفتاحية
$("#panel").slideDown("slow"); // 600 ميلي ثانية
$("#panel").slideDown("fast"); // 200 ميلي ثانية

// مع دالة استدعاء
$("#panel").slideDown(500, function() {
    alert("اللوحة مرئية الآن!");
});

<button id="slideUpBtn">انزلاق للأعلى</button>

<script>
$("#slideUpBtn").click(function() {
    $("#panel").slideUp(600);
});

// انزلاق للأعلى مع استدعاء
$("#panel").slideUp(400, function() {
    console.log("تم إخفاء اللوحة");
});

// انزلاق عناصر متعددة للأعلى
$(".collapsible-section").slideUp("slow");
</script>

<button id="toggleBtn">تبديل اللوحة</button>
<div id="panel">
    <p>انقر فوق الزر لتبديل هذه اللوحة</p>
</div>

<script>
$(document).ready(function() {
    $("#toggleBtn").click(function() {
        $("#panel").slideToggle(500);
    });
});
</script>

<style>
.accordion {
    max-width: 600px;
    margin: 20px auto;
}
.accordion-header {
    background: var(--primary);
    color: white;
    padding: 15px;
    cursor: pointer;
    border: none;
    width: 100%;
    text-align: right;
    font-size: 16px;
    margin-top: 5px;
    transition: background 0.3s;
}
.accordion-header:hover {
    background: var(--primary-light);
}
.accordion-header.active {
    background: var(--primary-light);
}
.accordion-content {
    display: none;
    padding: 15px;
    background: var(--bg-light);
    border: 1px solid var(--border-light);
}
</style>

<div class="accordion">
    <button class="accordion-header">القسم 1</button>
    <div class="accordion-content">
        <p>محتوى القسم 1</p>
    </div>

    <button class="accordion-header">القسم 2</button>
    <div class="accordion-content">
        <p>محتوى القسم 2</p>
    </div>

    <button class="accordion-header">القسم 3</button>
    <div class="accordion-content">
        <p>محتوى القسم 3</p>
    </div>
</div>

<script>
$(document).ready(function() {
    $(".accordion-header").click(function() {
        // إغلاق جميع الأقسام الأخرى
        $(".accordion-content").not($(this).next()).slideUp(300);
        $(".accordion-header").not($(this)).removeClass("active");

        // تبديل القسم الحالي
        $(this).next().slideToggle(300);
        $(this).toggleClass("active");
    });
});
</script>

<style>
.menu {
    list-style: none;
    padding: 0;
    margin: 0;
    background: var(--primary);
}
.menu li {
    position: relative;
    display: inline-block;
}
.menu a {
    display: block;
    padding: 15px 20px;
    color: white;
    text-decoration: none;
}
.submenu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 200px;
    background: var(--primary-light);
    list-style: none;
    padding: 0;
    margin: 0;
}
.submenu li {
    display: block;
}
</style>

<ul class="menu">
    <li>
        <a href="#">الرئيسية</a>
    </li>
    <li class="has-submenu">
        <a href="#">المنتجات</a>
        <ul class="submenu">
            <li><a href="#">تصميم الويب</a></li>
            <li><a href="#">التطوير</a></li>
            <li><a href="#">الاستشارات</a></li>
        </ul>
    </li>
    <li>
        <a href="#">اتصل بنا</a>
    </li>
</ul>

<script>
$(document).ready(function() {
    $(".has-submenu").hover(
        function() {
            $(this).find(".submenu").stop(true, true).slideDown(200);
        },
        function() {
            $(this).find(".submenu").stop(true, true).slideUp(200);
        }
    );
});
</script>

<style>
.faq-item {
    margin-bottom: 10px;
    border: 1px solid var(--border-light);
    border-radius: 5px;
    overflow: hidden;
}
.faq-question {
    background: var(--bg-light);
    padding: 15px;
    cursor: pointer;
    font-weight: bold;
    position: relative;
    transition: background 0.3s;
}
.faq-question:hover {
    background: var(--primary-light);
}
.faq-question:after {
    content: "+";
    position: absolute;
    left: 15px;
    font-size: 24px;
    transition: transform 0.3s;
}
.faq-question.active:after {
    content: "−";
}
.faq-answer {
    display: none;
    padding: 15px;
    background: white;
}
</style>

<div class="faq">
    <div class="faq-item">
        <div class="faq-question">ما هي jQuery؟</div>
        <div class="faq-answer">
            <p>jQuery هي مكتبة JavaScript سريعة وصغيرة وغنية بالميزات.</p>
        </div>
    </div>

    <div class="faq-item">
        <div class="faq-question">لماذا نستخدم jQuery؟</div>
        <div class="faq-answer">
            <p>تبسط jQuery التنقل في مستندات HTML ومعالجة الأحداث وAjax.</p>
        </div>
    </div>

    <div class="faq-item">
        <div class="faq-question">هل jQuery لا تزال ذات صلة؟</div>
        <div class="faq-answer">
            <p>نعم، لا تزال jQuery تُستخدم على نطاق واسع في العديد من مواقع الإنتاج.</p>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
    $(".faq-question").click(function() {
        // تبديل الإجابة
        $(this).next(".faq-answer").slideToggle(300);

        // تبديل الفئة النشطة
        $(this).toggleClass("active");
    });
});
</script>

<style>
.product-card {
    width: 300px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    overflow: hidden;
    margin: 20px;
}
.product-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.product-info {
    padding: 15px;
}
.product-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}
.product-price {
    color: var(--primary);
    font-size: 20px;
    font-weight: bold;
}
.product-details {
    display: none;
    padding: 15px;
    background: var(--bg-light);
    border-top: 1px solid var(--border-light);
}
.toggle-details {
    width: 100%;
    padding: 10px;
    background: var(--primary);
    color: white;
    border: none;
    cursor: pointer;
    transition: background 0.3s;
}
.toggle-details:hover {
    background: var(--primary-light);
}
</style>

<div class="product-card">
    <img src="product.jpg" alt="منتج" class="product-image">
    <div class="product-info">
        <h3 class="product-title">منتج مميز</h3>
        <p class="product-price">99.99 دولار</p>
        <button class="toggle-details">عرض التفاصيل</button>
    </div>
    <div class="product-details">
        <h4>المواصفات</h4>
        <ul>
            <li>المادة: فولاذ فاخر</li>
            <li>الوزن: 500 جرام</li>
            <li>الضمان: سنتان</li>
        </ul>
    </div>
</div>

<script>
$(document).ready(function() {
    $(".toggle-details").click(function() {
        var details = $(this).closest(".product-card").find(".product-details");
        details.slideToggle(400);

        // تحديث نص الزر
        if (details.is(":visible")) {
            $(this).text("إخفاء التفاصيل");
        } else {
            $(this).text("عرض التفاصيل");
        }
    });
});
</script>

// انزلاق وتلاشي في نفس الوقت
$("#panel").slideDown(500).fadeTo(500, 0.8);

// رسوم متحركة متسلسلة
$("#panel").slideDown(300, function() {
    $("#message").slideDown(300);
});

// انزلاق مع تغيير النص
$("#panel").slideToggle(400, function() {
    if ($(this).is(":visible")) {
        $("#status").text("اللوحة مفتوحة");
    } else {
        $("#status").text("اللوحة مغلقة");
    }
});