jQuery 3.3

.fadeOut()




jquery

.fadeOut ([المدة] [، مكتمل]) الإرجاع: jQuery

الوصف ؛: إخفاء العناصر المتطابقة عن طريق تلاشيها إلى شفافة.

  • الإصدار المضاف: 1.0 .fadeOut ([المدة] [، مكتمل])

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

    • خيارات
      اكتب: 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 .fadeOut ([المدة] [، التيسير] [، مكتمل])

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

يقوم أسلوب .fadeOut() بتحريك عتامة العناصر المتطابقة. بمجرد وصول العتامة إلى 0 ، يتم تعيين خاصية نمط display إلى none ، لذلك لم يعد العنصر يؤثر على تخطيط الصفحة.

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

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

<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">

مع إظهار العنصر في البداية ، يمكننا إخفاؤه ببطء:

$( "#clickme" ).click(function() {
  $( "#book" ).fadeOut( "slow", function() {
    // Animation complete.
  });
});
الشكل 1 - رسم توضيحي fadeOut()

ملاحظة: لتجنب معالجة DOM غير الضرورية ، .fadeOut() بإخفاء عنصر يعتبر مخفيًا بالفعل. للحصول على معلومات حول العناصر التي تعتبرها jQuery مخفية ، راجع : محدد مخفي .

تخفيف

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

وظيفة رد الاتصال

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

اعتبارًا من jQuery 1.6 ، يمكن استخدام الأسلوب .promise() بالتزامن مع طريقة deferred.done() لتنفيذ رد اتصال واحد للرسم المتحرك ككل عندما تكمل جميع العناصر المطابقة رسومها المتحركة (انظر المثال .promise () ).

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

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

أمثلة:

تحريك جميع الفقرات لتتلاشى ، واستكمال الرسوم المتحركة في غضون 600 جزء من الثانية.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fadeOut demo</title>
  <style>
  p {
    font-size: 150%;
    cursor: pointer;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>
  If you click on this paragraph
  you'll see it just fade away.
</p>
 
<script>
$( "p" ).click(function() {
  $( "p" ).fadeOut( "slow" );
});
</script>
 
</body>
</html>

عرض:

يزيل الامتدادات في أحد الأقسام التي تنقر عليها.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fadeOut demo</title>
  <style>
  span {
    cursor: pointer;
  }
  span.hilite {
    background: yellow;
  }
  div {
    display: inline;
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<h3>Find the modifiers - <div></div></h3>
<p>
  If you <span>really</span> want to go outside
  <span>in the cold</span> then make sure to wear
  your <span>warm</span> jacket given to you by
  your <span>favorite</span> teacher.
</p>
 
<script>
$( "span" ).click(function() {
  $( this ).fadeOut( 1000, function() {
    $( "div" ).text( "'" + $( this ).text() + "' has faded!" );
    $( this ).remove();
  });
});
$( "span" ).hover(function() {
  $( this ).addClass( "hilite" );
}, function() {
  $( this ).removeClass( "hilite" );
});
</script>
 
</body>
</html>

عرض:

تخفّص قسمين ، أحدهما مع تخفيف "خطي" والآخر مع التخلف عن السداد "البديل".

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fadeOut demo</title>
  <style>
  .box,
  button {
    float: left;
    margin: 5px 10px 5px 0;
  }
  .box {
    height: 80px;
    width: 80px;
    background: #090;
  }
  #log {
    clear: left;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<button id="btn1">fade out</button>
<button id="btn2">show</button>
 
<div id="log"></div>
 
<div id="box1" class="box">linear</div>
<div id="box2" class="box">swing</div>
 
<script>
$( "#btn1" ).click(function() {
  function complete() {
    $( "<div>" ).text( this.id ).appendTo( "#log" );
  }
  $( "#box1" ).fadeOut( 1600, "linear", complete );
  $( "#box2" ).fadeOut( 1600, complete );
});
 
$( "#btn2" ).click(function() {
  $( "div" ).show();
  $( "#log" ).empty();
});
</script>
 
</body>
</html>

عرض: