شرح الدالة slideDown والدالة slideUp

[Admin]

بسم الله الرحمن الرحيم



شرح الدالة slideDown والدالة slideUp

درسنا اليوم يتحدث عن دالتين كل دالة عملها عكس الدالة الاخرى

فالدالة الاولى slideDown : عملها ان تقوم باظهار العنصر المخفي بطريقة منزلقة من الأعلى للأسفل

اما الدالة الثانية sideUp : فعملها ان تقوم باخفاء العنصر الظاهر بطريقة منزلقة من الاسفل للاعلى

طريقة كتابة الدالتين واحدة مع تغيير اسم الدالة فقط

$(selector).slideDown(num, function(){

    });

    $(selector).slideUp(num, function(){

    });

بداية ً لابد من اسناد العنصر الذي سوف تعمل عليه الدالة والمرموز له في الكود السابق ب selector

بعد ذلك قمنا بكتاب الدالة وكما تلاحظون الدالتين لهما نفس الطريقة

بعد ذلك تجدون متغير باسم num وهذا المتغير يتم وضع فيه سرعة انزلاق العنصر وكما ذكرت في درس الدالتين hide و show يتم كتابة عدد الثواني بالميلي ثانية 1000 ميلي = ثانية

بعد ذلك قمنا بكتابة function والتي تعتبر callback ومعناها لو احببت تبسيطه بعد انزلاق العنصر مالذي تود عمله

ولنأخذ مثال لكي تتضع الصورة:

لنفرض ان لدينا div بسيط داخله اسم معين

وفوقه زرين الاول لاخفاء div والاخر لأظهاره فسوف يكون الكود بهذا الشكل

<div class="container">
                    <button class="xenarabia slidedown_div">
                      اضغط هنا لاظهار المحتوى
                    </button>
                    <button class="xenarabia slideup_div">
                      اضغط هنا لاخفاء المحتوى
                    </button>
                  
                    <div id="container" style="display: none;">
                      <h3>
                        اسم معين
                      </h3>
                    </div>
                </div>

والان سوف نستخدم الدالتين في درسنا هذا لاظهار واخفاء المحتوى اضافة الى ذلك قمت باستخدام ال callback كما سترون الان

$(function() {
    $('.slidedown_div').click(function() {
        $('#container').slideDown("3000", function() {
            alert('تم اظهار المحتوى');
        });
    });

    $('.slideup_div').click(function() {
        $('#container').slideUp("3000", function() {
            alert('تم اخفاء المحتوى');
        });
    });

});

كما ترون في الكود السابق قمنا اولاً باستخدام الدالة click والتي سبق شرحها في الدروس السابقة

ثم قمنا بتعيين العنصر container للدالة الاولى slideDown لكي يتم اظهاره وبعد اظهارة استخدمنا دالة callback بحيث بعد اظهار العنصر تظهر لنا رسالة بانه تم اظهارة

وقمنا بعمل نفس الطريقة مع الدالة الثانية slideUp ولكن الاختلاف في دالة callback فقد غيرنا الرسالة الى تم اخفاء المحتوى



انتهى الشرح

بالتوفيق للجميع

والسلام ختام​