slideDown()

.slideDown( [ duration ], [ callback ] )

מחזירה: jQuery

תיאור: מציג אלמנים בהתאמה עם אפקט תנועה החלקה.

.slideDown( [ duration ], [ callback ] )

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

duration

מחרוזת, מספר

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

callback

פונקציה

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

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

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

duration

מחרוזת, מספר

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

easing

מחרוזת

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

callback

פונקציה

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

שיטה .slideDown() משנה גובה של אלמנטים בהתאמה. היא גורמת להחלקה של חלק התחתון של האלמנט מטא.

משך ניתן באלפיות השניה; מספר גדול יותר מציין אנימציה איטית יותר, ולא מהירה יותר. ביטוי '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').slideDown('slow', function() {
    // Animation complete.
  });
});

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

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

דוגמאות

דוגמה 1

פותח כל אלמנטים div מטה על ידי אפקט החלקה, משך של אפקטים אנימציה 600 אלפיות השנייה.

    $(document.body).click(function () {
      if ($("div:first").is(":hidden")) {
        $("div").slideDown("slow");
      } else {
        $("div").hide();
      }
    });

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

נסה זאת בעצמך

דוגמה 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 () {
      if ($("div:first").is(":hidden")) {
        $("div").slideDown("slow");
      } else {
        $("div").hide();
      }
    });
  });
  </script>
  <style>
  div { background:#de9a44; margin:3px; width:80px; 
        height:40px; display:none; float:left; }
  </style>
</head>
<body>
  Click me!
  <div></div>
  <div></div>
  <div></div>
</body>
</html>

נסה זאת בעצמך

דוגמה 2

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

    $("div").click(function () {
      $(this).css({ borderStyle:"inset", cursor:"wait" });
      $("input").slideDown(1000,function(){
        $(this).css("border", "2px red inset")
               .filter(".middle")
                 .css("background", "yellow")
                 .focus();
        $("div").css("visibility", "hidden");
      });
    });

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

נסה זאת בעצמך

דוגמה 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).css({ borderStyle:"inset", cursor:"wait" });
      $("input").slideDown(1000,function(){
        $(this).css("border", "2px red inset")
               .filter(".middle")
                 .css("background", "yellow")
                 .focus();
        $("div").css("visibility", "hidden");
      });
    });
  });
  </script>
  <style>
  div { background:#cfd; margin:3px; width:50px; 
        text-align:center; float:left; cursor:pointer;
        border:2px outset black; font-weight:bolder; }
  input { display:none; width:120px; float:left; 
          margin:10px; }
  </style>
</head>
<body>
  <div>Push!</div>
  <input type="text" />
  <input type="text" class="middle" />
  <input type="text" />
</body>
</html>

נסה זאת בעצמך

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

כן לא

slideDown()

.slideDown( [ duration ], [ callback ] )

.slideDown( [ duration ], [ callback ] )

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

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

דוגמאות

דוגמה 1

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

דוגמה 2

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

תגובות