.fadeTo( duration, opacity, [ callback ] )
מחזירה: jQuery
תיאור: מגדיר נראות של אלמנטים בהתאמה.
.fadeTo( duration, opacity, [ callback ] )
הוספה בגרסה: 1.0
מחרוזת או מספר המגדירים כמה זמן אנימציה תעבוד.
opacity
מספר בין 0 ל-1 המציין רמת הנראות.
callback
פונקציה שמופעלת כאשר אנימציה מסתיימת.
.fadeTo( duration, opacity, [ easing ], [ callback ] )
הוספה בגרסה: 1.4.3
מחרוזת או מספר המגדירים כמה זמן אנימציה תעבוד.
opacity
מספר בין 0 ל-1 המציין רמת הנראות.
easing
מחרוזת המציינת איזה פונקצית הפגה תשתמש עבור המעבר.
callback
פונקציה שמופעלת כאשר אנימציה מסתיימת.
שיטה .fadeTo() מבצעת אנימצית נראות של אלמנטים בהתאמה.
משך ניתן באלפיות השניה;
מספר גדול יותר מציין אנימציה איטית יותר, ולא מהירה יותר.
ביטוי
'fast' ו- 'slow'
מתאים למשך של
200 ו- 600
אלפיות השניה בהתאם.
אם ביטויים אחרים סופקו או אם פרמטר
duration
לא מוגדר,
משמשת משך ברירת מחדל של
400 אלפיות השניה.
אם צוינה, פונקציה של קריאה חוזרת מופעלת מייד אחרי סיום אנימציה.
זה יכול להיות שימושי כדי לשרשר אנימציות שונות יחד לפי הסדר מסוים.
לפונקציה של קריאה חוזרת לא נשלחות ארגומנטים, אבל
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. למידע מפורט ראו jQuery.fx.off.
דוגמאות
דוגמה 1
משנה נראות של פסקה ראשונה לערך 0.33 ( 33%, שליש מהנראות המלאה ) , משך של אנימציה - 600 אלפיות השנייה.דוגמה 1 - קוד מלא:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("p:first").click(function () { $(this).fadeTo("slow", 0.33); }); }); </script> </head> <body> <p> Click this paragraph to see it fade. </p> <p> Compare to this one that won't fade. </p> </body> </html>
דוגמה 2
משנה שקיפות של אלמנטים div באופן אקראי, משך אנימציה 200 אלפיות השנייה.קוד מלא:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-1.5.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("div").click(function () {
$(this).fadeTo("fast", Math.random());
});
});
</script>
<style>
p { width:80px; margin:0; padding:5px; }
div { width:40px; height:40px; position:absolute; }
div#one { top:0; left:0; background:#f00; }
div#two { top:20px; left:20px; background:#0f0; }
div#three { top:40px; left:40px; background:#00f; }
</style>
</head>
<body>
<p>And this is the library that John built...</p>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</body>
</html>
דוגמה 3
מצאו תשובה נכונה! משך האנימציה 250 אלפיות השנייה, בסיום משתנה גם סגנון של הטקסט .
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"});
});
});
דוגמה 2 - קוד מלא:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ $("div").click(function () { $(this).fadeTo("fast", Math.random()); }); }); </script> <style> p { width:80px; margin:0; padding:5px; } div { width:40px; height:40px; position:absolute; } div#one { top:0; left:0; background:#f00; } div#two { top:20px; left:20px; background:#0f0; } div#three { top:40px; left:40px; background:#00f; } </style> </head> <body> <p>And this is the library that John built...</p> <div id="one"></div> <div id="two"></div> <div id="three"></div> </body> </html>
האם מידע זה היה מועיל?
