التابع .fadeTo() في jQuery
.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.
});
});
عند ضبط المدة 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>