jQuery 3.3

.fadeTo()




jquery

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

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

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

    • المدة الزمنية
      النوع: String أو Number
      سلسلة أو رقم يحددان مدة تشغيل الرسم المتحرك.
    • غموض
      اكتب: Number
      يشير الرقم بين 0 و 1 إلى عتامة الهدف.
    • اكتمال
      النوع: Function ()
      وظيفة للاتصال بمجرد اكتمال الرسوم المتحركة.
  • الإصدار المضافة: 1.4.3 .fadeTo (المدة ، العتامة [، التيسير] [، مكتمل])

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

تقوم طريقة .fadeTo() بتحريك عتامة العناصر المتطابقة. يشبه أسلوب .fadeIn() لكن هذه الطريقة تُظهِر العنصر وتختفي دومًا إلى عتامة 100٪.

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

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

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

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

مع تعيين duration إلى 0 ، هذه الطريقة فقط تغيير خاصية opacity CSS ، لذلك .fadeTo( 0, opacity ) هو نفسه كـ .css( "opacity", opacity ) .

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

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

أمثلة:

يتدفق المقطع الأول للرسوم المتحركة إلى عتامة من 0.33 (33٪ ، حوالي ثلث مرئية) ، إكمال الرسم المتحرك ضمن 600 ميلي ثانية.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fadeTo demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>
Click this paragraph to see it fade.
</p>
 
<p>
Compare to this one that won't fade.
</p>
 
<script>
$( "p:first" ).click(function() {
  $( this ).fadeTo( "slow", 0.33 );
});
</script>
 
</body>
</html>

عرض:

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

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fadeTo demo</title>
  <style>
  p {
    width: 80px;
    margin: 0;
    padding: 5px;
  }
  div {
    width: 40px;
    height: 40px;
    position: absolute;
  }
  #one {
    top: 0;
    left: 0;
    background: #f00;
  }
  #two {
    top: 20px;
    left: 20px;
    background: #0f0;
  }
  #three {
    top: 40px;
    left:40px;
    background:#00f;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>And this is the library that John built...</p>
 
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
 
<script>
$( "div" ).click(function() {
  $( this ).fadeTo( "fast", Math.random() );
});
</script>
 
</body>
</html>

عرض:

العثور على الجواب الصحيح! تستغرق عملية الخبو 250 مللي ثانية وتغيير الأنماط المختلفة عند اكتمالها.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>fadeTo demo</title>
  <style>
  div, p {
    width: 80px;
    height: 40px;
    top: 0;
    margin: 0;
    position: absolute;
    padding-top: 8px;
  }
  p {
    background: #fcc;
    text-align: center;
  }
  div {
    background: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>Wrong</p>
<div></div>
<p>Wrong</p>
<div></div>
<p>Right!</p>
<div></div>
 
<script>
var getPos = function( n ) {
  return (Math.floor( n ) * 90) + "px";
};
$( "p" ).each(function( n ) {
  var r = Math.floor( Math.random() * 3 );
  var tmp = $( this ).text();
  $( this ).text( $( "p:eq(" + r + ")" ).text() );
  $( "p:eq(" + r + ")" ).text( tmp );
  $( this ).css( "left", getPos( n ) );
});
$( "div" )
  .each(function( n ) {
    $( this ).css( "left", getPos( n ) );
  })
  .css( "cursor", "pointer" )
  .click( function() {
    $( this ).fadeTo( 250, 0.25, function() {
      $( this )
        .css( "cursor", "" )
        .prev()
          .css({
            "font-weight": "bolder",
            "font-style": "italic"
          });
    });
  });
</script>
 
</body>
</html>

عرض: