fadeIn()

.fadeIn( [ duration ], [ callback ] )

מחזירה: jQuery

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

.fadeIn( [ duration ], [ callback ] )

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

duration

מחרוזת, מספר

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

callback

פונקציה

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

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

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

duration

מחרוזת, מספר

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

easing

מחרוזת

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

callback

פונקציה

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

שיטה .fadeIn() מבצעת אנימציה של נראות על אלמנטים בהתאמה.

משך ניתן באלפיות השניה; מספר גדול יותר מציין אנימציה איטית יותר, ולא מהירה יותר. ביטוי '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 hidden, we can show it slowly:
    $('#clickme').click(function() {
      $('#book').fadeIn('slow', function() {
        // Animation complete
      });
    });

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

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

דוגמאות

דוגמה 1

מציג אלמנטים div מוסתרים אחד אחרי השני באמצעות אפקט fadein, משך האנימציה - 600 אלפיות השנייה.

    $(document.body).click(function () {
      $("div:hidden:first").fadeIn("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(){
    $(document.body).click(function () {
      $("div:hidden:first").fadeIn("slow");
    });
  });
  </script>
  <style>
  span { color:red; cursor:pointer; }
  div { margin:3px; width:80px; display:none;
        height:80px; float:left; }
  div#one { background:#f00; }
  div#two { background:#0f0; }
  div#three { background:#00f; }
  </style>
</head>
<body>
  <span>Click here...</span>
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</body>
</html>

נסה זאת בעצמך

דוגמה 2

בלחיצה מוצג מלבן אדום מעל הטקסט. בסיום, מהר מציג טקסט מעל המלבן.

    $("a").click(function () {
      $("div").fadeIn(3000, function () {
        $("span").fadeIn(2000);
      });
      return false;
    });

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

נסה זאת בעצמך

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

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script type="text/javascript" language="javascript">
  $(document).ready(function(){
    $("a").click(function () {
      $("div").fadeIn(3000, function () {
        $("span").fadeIn(2000);
      });
      return false;
    }); 
  });
  </script>
  <style>
  p { position:relative; width:400px; height:90px; }
  div { position:absolute; width:400px; height:65px; 
        font-size:36px; text-align:center; 
        color:black; background:red;
        padding-top:25px; font-weight:bold;
        top:0; left:0; display:none; }
  </style>
</head>
<body>
  <p>
    Let it be known that the party of the first part
    and the party of the second part are henceforth
    and hereto directed to assess the allegations
    for factual correctness... (<a href="#">click!</a>)
    <div><span>CENSORED!</span></div>
  </p>
</body>
</html>

נסה זאת בעצמך

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

כן לא

fadeIn()

.fadeIn( [ duration ], [ callback ] )

.fadeIn( [ duration ], [ callback ] )

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

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

דוגמאות

דוגמה 1

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

דוגמה 2

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

תגובות