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






شرح الدالة slideDown والدالة slideUp
درسنا اليوم يتحدث عن دالتين كل دالة عملها عكس الدالة الاخرى
فالدالة الاولى slideDown : عملها ان تقوم باظهار العنصر المخفي بطريقة منزلقة من الأعلى للأسفل
اما الدالة الثانية sideUp : فعملها ان تقوم باخفاء العنصر الظاهر بطريقة منزلقة من الاسفل للاعلى
طريقة كتابة الدالتين واحدة مع تغيير اسم الدالة فقط

$(selector).slideDown(num, function(){<br />
<br />
&nbsp; &nbsp; });<br />
<br />
&nbsp; &nbsp; $(selector).slideUp(num, function(){<br />
<br />
&nbsp; &nbsp; });<br />
<br />

بداية ً لابد من اسناد العنصر الذي سوف تعمل عليه الدالة والمرموز له في الكود السابق ب 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 فقد غيرنا الرسالة الى تم اخفاء المحتوى

انتهى الشرح
بالتوفيق للجميع
والسلام ختام