slideToggle()

.slideToggle( [ duration ], [ callback ] )

מחזירה: jQuery

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

.slideToggle( [ duration ], [ callback ] )

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

duration

מחרוזת, מספר

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

callback

פונקציה

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

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

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

duration

מחרוזת, מספר

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

easing

מחרוזת

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

callback

פונקציה

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

שיטה .slideToggle() משנה גובה של אלמנטים בהתאמה. זה גורם להחלקה של חלק התחתון של הדף מטה או מעלה, הסתרה או הצגה של האלמנט. אם אלמנט היה מוצג, הוא יוסתר; אם היה מוסתר, הוא יוצג. מאפיין display נשמר ומשוחזר לפי הצורך. אם לאלמנט ערך של display היה ב- inline, כאשר מוסתר או מוצג, פעם הבאה הוא יוצג inline. כאשר מאפיין מגיע ל-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" />

אנחנו יכולים להפעיל .slideToggle() כאשר אלמנט אחר הוקש:

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

אם אלמנט היה מוצג, נוכל להסתיר אותו בלחיצה ראשונה:

בלחיצה השניה האלמנט יוצג שוב:

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

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

דוגמאות

דוגמה 1

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

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

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

נסה זאת בעצמך

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

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script>
  $(document).ready(function(){
    $("button").click(function () {
      $("p").slideToggle("slow");
    });
  });
  </script>
  <style>
  p { width:400px; }
  </style>
</head>
<body>
  <button>Toggle</button>
  <p>
    This is the paragraph to end all paragraphs.  You
    should feel <em>lucky</em> to have seen such a paragraph in
    your life.  Congratulations!
  </p>
</body>
</html>

נסה זאת בעצמך

דוגמה 2

פותח/סוגר אלמנטים div בין המופרדים.

    $("#aa").click(function () {
      $("div:not(.still)").slideToggle("slow", function () {
        var n = parseInt($("span").text(), 10);
        $("span").text(n + 1);
      });
    });

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

נסה זאת בעצמך

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

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script>
  $(document).ready(function(){
    $("#aa").click(function () {
      $("div:not(.still)").slideToggle("slow", function () {
        var n = parseInt($("span").text(), 10);
        $("span").text(n + 1);
      });
    });
  });
  </script>
  <style>
  div { background:#b977d1; margin:3px; width:60px; 
        height:60px; float:left; }
  div.still { background:#345; width:5px; }
  div.hider { display:none; }
  span { color:red; }
  </style>
</head>
<body>
  <button id="aa">Toggle</button> There have been <span>0</span> 
toggled divs.
  <div></div><div class="still"></div>
  <div style="display:none;"></div><div class="still"></div>
  <div></div><div class="still"></div>
  <div class="hider"></div><div class="still"></div>
  <div class="hider"></div><div class="still"></div>
  <div></div>
</body>
</html>

נסה זאת בעצמך

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

כן לא

slideToggle()

.slideToggle( [ duration ], [ callback ] )

.slideToggle( [ duration ], [ callback ] )

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

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

דוגמאות

דוגמה 1

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

דוגמה 2

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

תגובות