fadeToggle()

.fadeToggle( [ duration ], [ easing ], [ callback ] )

מחזירה: jQuery

תיאור: מציג או מסתיר אלמנטים בהתאמה על ידי אנימציה של האטימות שלהם.

.fadeToggle( [ duration ], [ easing ], [ callback ] )

הוספה בגרסה: 1.4.4

duration

מחרוזת, מספר

מחרוזת או מספר המגדירים כמה זמן אנימציה תעבוד.

easing

מחרוזת

מחרוזת המציינת איזה פונקצית הפגה תשתמש עבור המעבר.

callback

פונקציה

פונקציה שמופעלת כאשר אנימציה מסתיימת.

שיטה .fadeToggle() מבצעת אנימציה של אטימות על אלמנטים בהתאמה. כאשר מופעל על אלמנט שמוצג, סגנון האלמנט display יוגדר ל none כאשר אטימות תגיע ל 0, אז אלמנט לא ישפיע יותר על פריסה של דף.

משך ניתן באלפיות השניה; מספר גדול יותר מציין אנימציה איטית יותר, ולא מהירה יותר.ביטוי 'fast' ו- 'slow' מתאים למשך של 200 ו- 600 אלפיות השניה בהתאם.אם ביטויים אחרים סופקו או אם פרמטר duration לא מוגדר, משמשת משך ברירת מחדל של 400 אלפיות השניה.

מחרוזת המייצגת פונקציה הקלות שמציינת את המהירות שבה אנימציה מתקדמת בנקודות שונות בתוך האנימציה. swing - מימושים הקלות בספריה jQuery בברירת מחדל, ואחת המתקדמת בקצב קבוע, נקרא linear. יותר פונקציות הקלות זמינות בשימוש עם תוספים, בעיקר חבילת jQuery UI.

אם צוינה פונקציה של קריאה חוזרת מופעלת מייד אחרי סיום אנימציה.זה יכול להיות שימושי כדי לשרשר אנימציות שונות יחד לפי הסדר מסוים.לפונקציה של קריאה חוזרת לא נשלחות ארגומנטים, אבל this הוא אלמנט DOM, שמופעלת עליו אנימציה.אם על אלמנטים רבים מופעלת אנימציה, חשוב לציין שפונקציה של קריאה חוזרת מופעלת פעם אחד עבור כל אלמנט בהתאמה, ולא פעם אחד על כל האנימציה.

הערות נוספות:

כל האפקטים של jQuery, כולל .fadeToggle(), ניתן לכבות באופן גלובלי באמצעות הגדרת jQuery.fx.off = true, שמגדיר משך ל 0. למידע מפורט ראו jQuery.fx.off.

דוגמה

מציג או מסתיר פסקה ראשונה, מסיים אנימציה תוך 600 אלפיות השניה באמצעות הקלת לינארית. מציג או מסתיר פסקה אחרונה תוך 200 אלפיות השניה, מכניס הודעה "finished" עם סיום.

$("button:first").click(function() {
  $("p:first").fadeToggle("slow", "linear");
});
$("button:last").click(function () {
  $("p:last").fadeToggle("fast", function () {
    $("#log").append("<div>finished</div>");
  });
});

תוצאת הפעלה קוד לעיל:

נסה זאת בעצמך

דוגמה - קוד מלא:

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
    $("button:first").click(function() {
      $("p:first").fadeToggle("slow", "linear");
    });
    $("button:last").click(function () {
      $("p:last").fadeToggle("fast", function () {
        $("#log").append("<div>finished</div>");
      });
    });
  });
  </script>
</head>
<body>
<button>fadeToggle p1</button>
<button>fadeToggle p2</button>
<p>This paragraph has a slow, linear fade.</p>
<p>This paragraph has a fast animation.</p>
<div id="log"></div>
</body>
</html>

נסה זאת בעצמך

האם מידע זה היה מועיל?

כן לא

fadeToggle()

.fadeToggle( [ duration ], [ easing ], [ callback ] )

.fadeToggle( [ duration ], [ easing ], [ callback ] )

הערות נוספות:

דוגמה

דוגמה - קוד מלא:

תגובות