الفرق بين المراجعتين لصفحة: «jQuery/fadeTo»

→ التعديل السابق التعديل اللاحق ←

مرئينص الويكي

مراجعة 13:36، 22 مايو 2018

`‎.fadeTo( duration, opacity [, complete ] )‎`

القيمة المعادة

يُعيد كائنًا من النوع jQuery.

الوصف

يضبط هذا التابع درجة عتامة العناصر المطابقة.

`‎.fadeTo( duration, opacity [, complete ] )‎`

أُضيف مع الإصدار: 1.0.

`duration`

مدة الحركة وهو من النوع عدد Number أو سلسلة نصية String.

`opacity`

رقم من النوع Number يتراوح ما بين 0 و 1 ويشير إلى درجة العتامة المستهدفة.

`complete`

دالة على الشكل Function()‎‎، تُستدعى بمجرد اكتمال الحركة.

`‎.fadeTo( duration, opacity [, easing ] [, complete ] )‎`

أُضيف مع الإصدار: 1.4.3.

`duration`

مدة الحركة وهو من النوع عدد Number أو سلسلة نصية String.

`opacity`

رقم من النوع Number يتراوح ما بين 0 و 1 ويشير إلى درجة العتامة المستهدفة.

`easing`

سلسلة نصية من النوع String، تُشير إلى دالة التخفيف المستخدمة في عملية التحوّل.

`complete`

دالة على الشكل Function()‎‎، تُستدعى بمجرد اكتمال الحركة.

يُحرّك التابع ‎.fadeTo عتامة العناصر المطابقة. ويشبه التابع ‎.fadeIn()‎‎ لكنه يُظهِر العنصر تدريجيًا إلى عتامة بدرجة 100%.

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

إذا توفرت، تنطلق دوال رد النداء بمجرد اكتمال الحركة. ويمكن أن يكون هذا مفيدًا لإدراج حركات مختلفة معا في تسلسل. لا يُرسل لدوال رد النداء أي وسائط، ولكن يُضبط الكائن this إلى عنصر 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>

مصادر

صفحة المحدد ‎‎‎.fadeTo()‎‎‎‎‎‎‎‎‎‎‎‎ في توثيق jQuery الرسمي.

@@ سطر 53: / سطر 53: @@
    });
 });
-</syntaxhighlight>الشكل 1 - رسم توضيحي لتأثير <code>fadeTo()‎‎</code>
+</syntaxhighlight>الشكل 1 - توضيح لتأثير <code>fadeTo()‎‎</code>
 عند ضبط المدة <code>duration</code> بالقيمة <code>0</code>، سيُغيّر هذا التابع خاصية <code>opacity</code> في CSS، لذلك يصبح ‎<code>.fadeTo( 0, opacity )‎</code> مثل <code>‎.‎css( "opacity", opacity )</code>‎.