jQuery 3.3

.show()




jquery

.show (). العودة: jQuery

الوصف: عرض العناصر المتطابقة.

  • الإصدار المضافة: 1.0 .show()

    • هذا التوقيع لا يقبل أي حجج.
  • الإصدار المضاف: 1.0 .show ([المدة] [، مكتمل])

    • المدة (الافتراضية: 400 )
      النوع: Number أو String
      سلسلة أو رقم يحددان مدة تشغيل الرسم المتحرك.
    • اكتمال
      النوع: Function ()
      هي وظيفة يتم الاتصال بها بمجرد اكتمال الرسوم المتحركة ، ويُطلق عليها مرة واحدة لكل عنصر متطابق.
  • الإصدار المضافة: 1.0 شو (خيارات)

    • خيارات
      اكتب: PlainObject
      خريطة للخيارات الإضافية لتمريرها إلى الطريقة.
      • المدة (الافتراضية: 400 )
        النوع: Number أو String
        سلسلة أو رقم يحددان مدة تشغيل الرسم المتحرك.
      • تخفيف (الافتراضي: swing )
        اكتب: String
        سلسلة تشير إلى وظيفة التخفيف التي سيتم استخدامها في عملية النقل.
      • قائمة الانتظار (الافتراضي: true )
        النوع: Boolean أو String
        A Boolean تشير إلى ما إذا كان لوضع الرسوم المتحركة في قائمة انتظار التأثيرات. إذا كانت غير صحيحة ، فسيبدأ الرسم المتحرك على الفور. بدءًا من jQuery 1.7 ، يمكن أيضًا أن يقبل خيار قائمة الانتظار سلسلة ، وفي هذه الحالة تتم إضافة الرسم المتحرك إلى قائمة الانتظار التي تمثلها تلك السلسلة. عند استخدام اسم قائمة انتظار مخصصة لا يبدأ الرسم المتحرك تلقائيًا ؛ يجب عليك الاتصال .dequeue("queuename") لبدء تشغيله.
      • specialEasing
        اكتب: PlainObject
        عنصر يحتوي على واحد أو أكثر من خصائص CSS المعرفة بواسطة وسيطة الخصائص ووظائف تسهيلاتها المقابلة. (النسخة المضافة: 1.4 )
      • خطوة
        النوع: Function ( Number الآن ، Tween توين)
        دالة يجب استدعاؤها لكل خاصية متحركة لكل عنصر متحرك. توفر هذه الوظيفة فرصة لتعديل الكائن Tween لتغيير قيمة الخاصية قبل تعيينها.
      • تقدم
        النوع: Function ( Promise الرسوم المتحركة ، تقدم Number ، Number متبقي)
        دالة يجب استدعاؤها بعد كل خطوة من الرسوم المتحركة ، مرة واحدة فقط لكل عنصر متحرك بغض النظر عن عدد الخصائص المتحركة. (النسخة المضافة: 1.8 )
      • اكتمال
        النوع: Function ()
        دالة تسمى بمجرد اكتمال الرسوم المتحركة على عنصر.
      • بداية
        النوع: Function ( Promise الرسوم المتحركة)
        دالة يتم الاتصال بها عندما يبدأ الرسم المتحرك على عنصر ما. (النسخة المضافة: 1.8 )
      • فعله
        النوع: Function ( Promise الرسوم المتحركة ، قفز BooleanToEnd)
        دالة يجب استدعائها عند اكتمال الرسوم المتحركة على عنصر (يتم حل كائن Promise). (النسخة المضافة: 1.8 )
      • فشل
        النوع: Function ( Promise الرسوم المتحركة ، قفز BooleanToEnd)
        دالة يتم استدعاؤها عندما يفشل إكمال الرسم المتحرك على عنصر (يتم رفض الكائن Promise الخاص به). (النسخة المضافة: 1.8 )
      • دائما
        النوع: Function ( Promise الرسوم المتحركة ، قفز BooleanToEnd)
        هي دالة يجب استدعاؤها عندما يكتمل الرسم المتحرك على عنصر أو يتوقف دون إتمامه (إما أن يكون كائن Promise قد تم حله أو رفضه). (النسخة المضافة: 1.8 )
  • وأضاف الإصدار: 1.4.3 شو (المدة [، تخفيف] [، كاملة])

    • المدة (الافتراضية: 400 )
      النوع: Number أو String
      سلسلة أو رقم يحددان مدة تشغيل الرسم المتحرك.
    • تخفيف (الافتراضي: swing )
      اكتب: String
      سلسلة تشير إلى وظيفة التخفيف التي سيتم استخدامها في عملية النقل.
    • اكتمال
      النوع: Function ()
      هي وظيفة يتم الاتصال بها بمجرد اكتمال الرسوم المتحركة ، ويُطلق عليها مرة واحدة لكل عنصر متطابق.

بدون أية معلمات ، .show() طريقة .show() هي أبسط طريقة لعرض عنصر:

$( ".target" ).show();

سيتم الكشف عن العناصر المتطابقة على الفور ، بدون رسوم متحركة. هذا يكافئ تقريباً استدعاء .css( "display", "block" ) ، فيما عدا أنه يتم استعادة خاصية display إلى أي شيء كان في البداية. إذا كان العنصر يحتوي على قيمة display inline ، فسيتم إخفاؤه display ، فسيظهر مرة أخرى في inline .

ملاحظة: إذا كنت تستخدم! المهم في الأنماط الخاصة بك ، مثل display: none !important ، .show() لن يتجاوز !important من المستحسن استخدام فئات مختلفة باستخدام .addClass() أو .removeClass() أو .toggleClass() . هناك طريقة أخرى تستخدم .attr( "style", "display: block !important;" ) ؛ كن حذرا ، على الرغم من أنه بالكتابة فوق سمة نمط العنصر.

عندما يتم توفير مدة أو كائن عادي أو وظيفة "كاملة" ، يصبح .show() طريقة رسوم متحركة. تقوم طريقة .show() بتحريك العرض والارتفاع والعتامة للعناصر المتطابقة في وقت واحد.

يتم إعطاء المدد بالمللي ثانية. تشير القيم الأعلى إلى الرسوم المتحركة الأبطأ ، وليس الصور الأسرع. يمكن توفير السلاسل 'fast' و 'slow' للإشارة إلى الفترات من 200 و 600 ميلي ثانية ، على التوالي.

اعتبارًا من jQuery 1.4.3 ، يمكن استخدام سلسلة اختيارية تسمي وظيفة تخفيف. تحدد وظائف التيسير السرعة التي يتقدم بها الرسم المتحرك في نقاط مختلفة داخل الرسوم المتحركة. تعتبر تطبيقات التخفيف الوحيدة في مكتبة jQuery هي الإعداد الافتراضي ، وتدعى swing ، والتطبيق الذي يتقدم بخطى ثابتة تسمى linear . تتوفر المزيد من وظائف التخفيف مع استخدام المكونات الإضافية ، وعلى الأخص جناح jQuery UI .

إذا تم توفيره ، يتم تشغيل معاودة الاتصال بمجرد اكتمال الرسوم المتحركة. هذا يمكن أن يكون مفيدا لرسومات متحركة مختلفة معا في التسلسل. لا يتم إرسال الاستدعاء أي وسائط ، ولكن يتم تعيينه على عنصر DOM الذي يتم تحريكه. في حالة تحريك عناصر متعددة ، من المهم ملاحظة أنه يتم تنفيذ معاودة الاتصال مرة واحدة لكل عنصر متطابق ، وليس مرة واحدة للرسوم المتحركة ككل.

ملاحظة: قد تتسبب هذه الطريقة في حدوث مشكلات في الأداء ، خاصة عند استخدامها على العديد من العناصر. إذا كنت تواجه مثل هذه المشكلات ، فاستخدم أدوات اختبار الأداء لتحديد ما إذا كانت هذه الطريقة تسببها. علاوة على ذلك ، يمكن أن تتسبب هذه الطريقة في حدوث مشكلات في التنسيقات المتجاوبة إذا اختلفت قيمة العرض مع أحجام مختلفة لإطار العرض.

يمكننا تحريك أي عنصر ، مثل صورة بسيطة:

<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">
With the element initially hidden, we can show it slowly:
$( "#clickme" ).click(function() {
  $( "#book" ).show( "slow", function() {
    // Animation complete.
  });
});
الشكل 1 - رسم توضيحي لتأثير show()

ملاحظات إضافية:

  • يمكن إيقاف تشغيل جميع تأثيرات jQuery ، بما في ذلك .show() عالميًا عن طريق تعيين jQuery.fx.off = true ، والذي يقوم بتعيين المدة إلى 0 بشكل jQuery.fx.off . لمزيد من المعلومات ، راجع jQuery.fx.off .

أمثلة:

يقوم بتحريك كل الفقرات المخفية لإظهارها ببطء ، وإكمال الرسوم المتحركة في غضون 600 مللي ثانية.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>show demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<button>Show it</button>
<p style="display: none">Hello  2</p>
 
<script>
$( "button" ).click(function() {
  $( "p" ).show( "slow" );
});
</script>
 
</body>
</html>

عرض:

إظهار div الأول ، متبوعة بكل div sibling div التالي بالترتيب ، مع 200ms حركة. يبدأ كل رسم متحرك عندما ينتهي الرسم المتحرك السابق لأحرف s slicling div.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>show demo</title>
  <style>
  div {
    background: #def3ca;
    margin: 3px;
    width: 80px;
    display: none;
    float: left;
    text-align: center;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<button id="showr">Show</button>
<button id="hidr">Hide</button>
<div>Hello 3,</div>
<div>how</div>
<div>are</div>
<div>you?</div>
 
<script>
$( "#showr" ).click(function() {
  $( "div" ).first().show( "fast", function showNext() {
    $( this ).next( "div" ).show( "fast", showNext );
  });
});
 
$( "#hidr" ).click(function() {
  $( "div" ).hide( 1000 );
});
</script>
 
</body>
</html>

عرض:

عرض كل عناصر الامتداد والمداخل مع رسم متحرك. تغيير النص بمجرد الانتهاء من الرسوم المتحركة.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>show demo</title>
  <style>
  span {
    display: none;
  }
  div {
    display: none;
  }
  p {
    font-weight: bold;
    background-color: #fcd;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<button>Do it!</button>
<span>Are you sure? (type 'yes' if you are) </span>
<div>
  <form>
    <input type="text"  value="as;ldkfjalsdf">
  </form>
</div>
<p style="display:none;">I'm hidden...</p>
 
<script>
function doIt() {
  $( "span,div" ).show( "slow" );
}
// Can pass in function name
$( "button" ).click( doIt );
 
$( "form" ).submit(function( event ) {
  if ( $( "input" ).val() === "yes" ) {
    $( "p" ).show( 4000, function() {
      $( this ).text( "Ok, DONE! (now showing)" );
    });
  }
  $( "span,div" ).hide( "fast" );
 
  // Prevent form submission
  event.preventDefault();
});
</script>
 
</body>
</html>

عرض: