مثال على استخدام الطريقة slidedown وslideup في jQuery

هذا المقال يلخص ويزيد من التحليل بناءً على أمثلة jQuery حول استخدام طرق slidedown وslideup. أشارككم هذا لتكونوا على علم، وتفاصيله كالتالي:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style type="text/css">
    *{font-size:12px;}
    div{width:600px;margin:auto;}
    #control{background-color:gold;padding:10px;margin-bottom:10px;}
  </style>
  <script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      $("#btnslideDown").click(function () {
        $("#message").slideDown(1000);
      });
      $("#btnslideUp").click(function () {
        $("#message").slideUp(1000);
      });
      //*****مثال1
      //      $("#btnToggle").click(function () {
      //        $("#message").slideToggle(1000);
      //      });
      //*****مثال2: يمكن إرسال دالة استدعاء كمعامل للوظائف المتحركة، مما يعني أن هذه الدالة ستتم تنفيذها بعد اكتمال التنفيذ
      $("#btnToggle").click(function () {
        $("#message").slideToggle(1000, function () {
          alert('أكملت تنفيذي!');
        });
      });
    });
  </script>
</head>
<body>
  <div id="control">
    <input id="btnslideDown" type="button" value="فتح div" />
    <input id="btnslideUp" type="button" value="إسقاط div" />
    <input id="btnToggle" type="button" value="التبديل" />
  </div>
  <div id="message">
    الفرق بين mouseover و mouseenter: div تحتوي على div آخر. راجع الملاحظات. مرتبط بظاهرة التسرب الحدث <br /> 
    سيتم تنشيط أحداث mouseover سواء مرور مؤشر الفأرة عبر العنصر المحدد أو عبر العناصر الفرعية <br />
    سيتم تنشيط أحداث mouseenter فقط عند مرور مؤشر الفأرة عبر العنصر المحدد (لا يتم تنشيطها عند مرور عبر العناصر الفرعية)
  </div>
</body>
</html>

للمزيد من المعلومات المتعلقة بjQuery، يمكن للقراء المهتمين الرجوع إلى موضوعات الموقع: "تجميع تقنيات إدارة النوافذ jQuery"، "تجميع تقنيات التدحرج jQuery"، "تجميع الاستخدامات الشائعة للإضافات jQuery"، "تجميع استخدامات Ajax في jQuery"، "تجميع تقنيات التشغيل للجداول (table) في jQuery"، "تجميع تقنيات التوسيع في jQuery"، "تجميع التأثيرات الكلاسيكية الشائعة في jQuery"، "تجميع استخدامات الأنيمات وال特效 في jQuery"، و "تجميع استخدامات اختيار selectors في jQuery".

آمل أن يكون هذا المقال قد ساعد الجميع في تصميم برمجيات jQuery.

البيان: محتويات هذا المقال تم جمعها من الإنترنت، ملكية حقوق النشر لصاحب المقال، محتويات يتم تقديمها من قبل مستخدمي الإنترنت بشكل تلقائي وتقديمها على الشبكة لا تملك حقوق الملكية، لم يتم تعديلها بشكل يدوي ولا تتحمل المسؤولية القانونية المتعلقة بذلك. إذا كنت قد وجدت محتوى يشتبه في حقوق النسخ، فمرحبًا بك في إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # بـ @) لإبلاغنا، وقدم الدليل على الدليل، إذا تم التحقق من ذلك، فإن الموقع سيرفع محتوى يشتبه في حقوق النسخ على الفور.

تعليمات الأساس

سيكون لك أيضًا