fadeOut()

.fadeOut( [ duration ], [ callback ] )

מחזירה: jQuery

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

.fadeOut( [ duration ], [ callback ] )

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

duration

מחרוזת, מספר

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

callback

פונקציה

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

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

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

duration

מחרוזת, מספר

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

easing

מחרוזת

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

callback

פונקציה

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

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

משך ניתן באלפיות השניה; מספר גדול יותר מציין אנימציה איטית יותר, ולא מהירה יותר. ביטוי '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" />

אם אלמנט מוצג נוכל להציג אותו לאט:

$('#clickme').click(function() {
  $('#book').fadeOut('slow', function() {
    // Animation complete.
  });
});

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

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

דוגמאות

דוגמה 1

מסתיר כל הפסקאות באמצעות אפקט fadeOut, משך האפקט - 600 אלפיות השנייה.

    $("p").click(function () {
      $("p").fadeOut("slow");
    });

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

נסה זאת בעצמך

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

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script type="text/javascript" language="javascript">
  $(document).ready(function(){
    $("p").click(function () {
      $("p").fadeOut("slow");
    });
  });
  </script>
  <style>
  p { font-size:150%; cursor:pointer; }
  </style>
</head>
<body>
  <p>
    If you click on this paragraph
    you'll see it just fade away.
  </p>
</body>
</html>

נסה זאת בעצמך

דוגמה 2

בלחיצה מסתיר אלמנטים span באמצעות אפקט fadeOut.

    $("span").click(function () {
      $(this).fadeOut(1000, function () {
        $("div").text("'" + $(this).text() + "' has faded!");
        $(this).remove();
      });
    });
    $("span").hover(function () {
      $(this).addClass("hilite");
    }, function () {
      $(this).removeClass("hilite");
    });

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

נסה זאת בעצמך

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

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script type="text/javascript" language="javascript">
  $(document).ready(function(){
    $("span").click(function () {
      $(this).fadeOut(1000, function () {
        $("div").text("'" + $(this).text() + "' has faded!");
        $(this).remove();
      });
    });
    $("span").hover(function () {
      $(this).addClass("hilite");
    }, function () {
      $(this).removeClass("hilite");
    });
  });
  </script>
  <style>
  span { cursor:pointer; }
  span.hilite { background:yellow; }
  div { display:inline; color:red; }
  </style>
</head>
<body>
  <h3>Find the modifiers - <div></div></h3>
  <p>
    If you <span>really</span> want to go outside
    <span>in the cold</span> then make sure to wear
    your <span>warm</span> jacket given to you by
    your <span>favorite</span> teacher.
  </p>
</body>
</html>

נסה זאת בעצמך

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

כן לא

fadeOut()

.fadeOut( [ duration ], [ callback ] )

.fadeOut( [ duration ], [ callback ] )

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

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

דוגמאות

דוגמה 1

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

דוגמה 2

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

תגובות