الفرق بين المراجعتين لصفحة: «jQuery/fadeTo»
Khaled-yassin (نقاش | مساهمات) |
لا ملخص تعديل |
||
| سطر 4: | سطر 4: | ||
=== القيمة المعادة === | === القيمة المعادة === | ||
يُعيد كائنًا من النوع [[jQuery/jQuery | يُعيد كائنًا من النوع [[jQuery/jQuery|jQuery]]. | ||
=== الوصف === | === الوصف === | ||
| سطر 38: | سطر 38: | ||
يُحرّك التابع <code>.fadeTo</code> عتامة العناصر المطابقة. ويشبه التابع <code>[[jQuery/fadeIn|.fadeIn()]]</code> لكنه يُظهِر العنصر تدريجيًا إلى عتامة بدرجة 100%. | يُحرّك التابع <code>.fadeTo</code> عتامة العناصر المطابقة. ويشبه التابع <code>[[jQuery/fadeIn|.fadeIn()]]</code> لكنه يُظهِر العنصر تدريجيًا إلى عتامة بدرجة 100%. | ||
تُعطى المدد بالمللي ثانية، وتشير القيم الأعلى إلى حركة أبطأ، وليس أسرع. يمكن إدخال السلاسل النصية '<code>fast</code>' و '<code>slow</code>' للإشارة إلى الفترات <code>200</code> و <code>600</code> ميللي ثانية، على التوالي. إذا أُدخِلت أي سلسلة أخرى، تستخدم المدة الافتراضية <code>400</code> ميلي ثانية. بخلاف توابع التأثير الأخرى، يتطلب التابع <code>.fadeTo</code> تحديد المدة | تُعطى المدد بالمللي ثانية، وتشير القيم الأعلى إلى حركة أبطأ، وليس أسرع. يمكن إدخال السلاسل النصية '<code>fast</code>' و '<code>slow</code>' للإشارة إلى الفترات <code>200</code> و <code>600</code> ميللي ثانية، على التوالي. إذا أُدخِلت أي سلسلة أخرى، تستخدم المدة الافتراضية <code>400</code> ميلي ثانية. بخلاف توابع التأثير الأخرى، يتطلب التابع <code>.fadeTo</code> تحديد المدة <code>duration</code> بشكل صريح. | ||
تنطلق دوال رد النداء بمجرد اكتمال الحركة إذا كانت تلك الدوال موجودةً. ويمكن أن يكون هذا مفيدًا لإدراج حركات مختلفة معا في تسلسل. لا يُرسل لدوال رد النداء أي وسائط، ولكن يُضبط الكائن <code>this</code> إلى عنصر DOM الذي يجري تحريكه. في حالة تحريك عناصر متعددة، من المهم ملاحظة أن دالة رد نداء تُنفذ مرة واحدة لكل عنصر مُطابق، وليس مرة واحدة للحركة ككل. | |||
يمكننا تحريك أي عنصر، مثل صورة بسيطة:<syntaxhighlight lang="jquery"> | يمكننا تحريك أي عنصر، مثل صورة بسيطة:<syntaxhighlight lang="jquery"> | ||
| سطر 53: | سطر 53: | ||
}); | }); | ||
}); | }); | ||
</syntaxhighlight> | </syntaxhighlight>عند ضبط المدة <code>duration</code> بالقيمة <code>0</code>، سيُغيّر هذا التابع خاصية <code>opacity</code> في CSS، لذلك يصبح <code>.fadeTo( 0, opacity )</code> مثل <code>.css( "opacity", opacity )</code>. | ||
عند ضبط المدة <code>duration</code> بالقيمة <code>0</code>، سيُغيّر هذا التابع خاصية <code>opacity</code> في CSS، لذلك يصبح <code>.fadeTo( 0, opacity )</code> مثل <code>.css( "opacity", opacity )</code>. | |||
=== ملاحظات إضافية === | === ملاحظات إضافية === | ||
يمكن إيقاف تشغيل كافة تأثيرات jQuery، بما في ذلك <code>.fadeTo()</code>، بشكل عام عن طريق ضبط <code>jQuery.fx.off = true</code>، والذي يضبط فعليًا المدة إلى 0. لمزيد من المعلومات، راجع [ | يمكن إيقاف تشغيل كافة تأثيرات jQuery، بما في ذلك <code>.fadeTo()</code>، بشكل عام عن طريق ضبط <code>jQuery.fx.off = true</code>، والذي يضبط فعليًا المدة إلى 0. لمزيد من المعلومات، راجع [[jQuery/jQuery/fx/off|jQuery.fx.off]]. | ||
=== أمثلة === | === أمثلة === | ||
تحريك المقطع الأول إلى عتامة بدرجة 0.33 (33%، حوالي ثلث مرئية)، ويكمل التحريك خلال 600 ميللي ثانية | تحريك المقطع الأول إلى عتامة بدرجة 0.33 (33%، حوالي ثلث مرئية)، ويكمل التحريك خلال 600 ميللي ثانية:<syntaxhighlight lang="html"> | ||
<!doctype html> | <!doctype html> | ||
<html lang="en"> | <html lang="en"> | ||
| سطر 87: | سطر 85: | ||
</body> | </body> | ||
</html> | </html> | ||
</syntaxhighlight>تحريك <code>[[HTML/div|<nowiki><div></nowiki>]]</code> إلى درجات تعتيم عشوائية مع كل نقرة، ويكمل التحريك خلال 200 ميللي ثانية | </syntaxhighlight>تحريك <code>[[HTML/div|<nowiki><div></nowiki>]]</code> إلى درجات تعتيم عشوائية مع كل نقرة، ويكمل التحريك خلال 200 ميللي ثانية:<syntaxhighlight lang="html"> | ||
<!doctype html> | <!doctype html> | ||
<html lang="en"> | <html lang="en"> | ||
| سطر 138: | سطر 136: | ||
</body> | </body> | ||
</html> | </html> | ||
</syntaxhighlight>العثور على الجواب الصحيح! تستغرق عملية التحريك 250 مللي ثانية وتغيّر أنماط المختلفة عند اكتمالها | </syntaxhighlight>العثور على الجواب الصحيح! تستغرق عملية التحريك 250 مللي ثانية وتغيّر أنماط المختلفة عند اكتمالها:<syntaxhighlight lang="html"> | ||
<!doctype html> | <!doctype html> | ||
<html lang="en"> | <html lang="en"> | ||
| سطر 206: | سطر 204: | ||
== مصادر == | == مصادر == | ||
[http://api.jquery.com/fadeTo/ صفحة المحدد .fadeTo() في توثيق jQuery الرسمي]. | * [http://api.jquery.com/fadeTo/ صفحة المحدد .fadeTo() في توثيق jQuery الرسمي]. | ||
[[تصنيف:jQuery]] | [[تصنيف:jQuery]] | ||
[[تصنيف:jQuery Method]] | [[تصنيف:jQuery Method]] | ||
[[تصنيف:jQuery Effects]] | [[تصنيف:jQuery Effects]] | ||
مراجعة 12:31، 27 مايو 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.
});
});
عند ضبط المدة 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>