hide()

.hide( )

מחזירה: jQuery

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

.hide()

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

.hide( duration, [ callback ] )

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

duration

מחרוזת, מספר

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

callback

פונקציה

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

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

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

duration

מחרוזת, מספר

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

easing

מחרוזת

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

callback

פונקציה

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

ללא פרמטרים, שיטה .hide() היא דרך הפשוטה להסתיר אלמנט:

$('.target').hide();

אלמנטים בהתאמה יוסתרו מייד, ללא אנימציה. זה שקול פחות או יותר להפעלת .css('display', 'none'), חוץ מזה שמאפיין display נשמר בנתוני המטמון של jQuery, כך ש- display ניתן לשחזר מאוחר יותר לערך הקודם. אם לאלמנט display היה בערך inline, ואחרי זה ב- hidden או shown, הוא שוב פעם יוצג כי inline.

כאשר משך מסופק, .hide() הופך לשיטת אנימציה. שיטה .hide() משנה רוחב, גובה ואטימות של אלמנטים בהתאמה בו זמנית.

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

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

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

ניתן להפעיל אנימציה על כל אובייקט, לדוגמה, תמונה רגילה:

<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />
With the element initially shown, we can hide it slowly:
$('#clickme').click(function() {
  $('#book').hide('slow', function() {
    alert('Animation complete.');
  });
});

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

דוגמאות

דוגמה 1

מסתיר כל הפסקאות.

    $("p").hide();
    $("a").click(function () {
      $(this).hide();
      return true;
    });

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

נסה זאת בעצמך

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

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script>
  $(document).ready(function(){
    $("p").hide();
    $("a").click(function () {
      $(this).hide();
      return true;
    });
  });
  </script>
</head>
<body>
  <p>Hello</p>
  <a href="#">Click to hide me too</a>
  <p>Here is another paragraph</p>
</body>
</html>

נסה זאת בעצמך

דוגמה 2

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

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

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

נסה זאת בעצמך

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

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script>
  $(document).ready(function(){
    $("button").click(function () {
      $("p").hide("slow");
    });    
  });
  </script>
  <style>
  p { background:#dad; font-weight:bold; }
  </style>
</head>
<body>
  <button>Hide 'em</button>
  <p>Hiya</p>
  <p>Such interesting text, eh?</p>
</body>
</html>

נסה זאת בעצמך

דוגמה 3

מפעיל אנימציה על כל אלמנטים מסוג span (מילים במקרה שלנו) ומסתיר אותם באמצעות מצב המהירות fast. משך האנמציה 200 אלפיות השנייה. בסיום כל אנימציה מתחילה אנימציה אחרת.

    $("#hidr").click(function () {
      $("span:last-child").hide("fast", function () {
        // use callee so don't have to name the function
        $(this).prev().hide("fast", arguments.callee); 
      });
    });
    $("#showr").click(function () {
      $("span").show(2000);
    });

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

נסה זאת בעצמך

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

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script>
  $(document).ready(function(){ 
    $("#hidr").click(function () {
      $("span:last-child").hide("fast", function () {
        // use callee so don't have to name the function
        $(this).prev().hide("fast", arguments.callee); 
      });
    });
    $("#showr").click(function () {
      $("span").show(2000);
    });
  });
  </script>
  <style>
  span { background:#def3ca; padding:3px; float:left; }
  </style>
</head>
<body>
  <button id="hidr">Hide</button>
  <button id="showr">Show</button>
  <div>
    <span>Once</span> <span>upon</span> <span>a</span> 
    <span>time</span> <span>there</span> <span>were</span> 
    <span>three</span> <span>programmers...</span>
  </div>
</body>
</html>

נסה זאת בעצמך

דוגמה 4

בלחיצה מסתיר אלמנטים div במשך 2 שניות, בסיום האנימציה מוחק אלמנט div. נסו ללחוץ על כמה אלמנטים בו זמנית.

for (var i = 0; i < 5; i++) {
      $("<div>").appendTo(document.body);
    }
    $("div").click(function () {
      $(this).hide(2000, function () {
        $(this).remove();
      });
    });

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

נסה זאת בעצמך

קוד מלא:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.5.js" type="text/javascript"></script>
  
  <script>

  $(document).ready(function(){
    
    for (var i = 0; i < 5; i++) {
      $("<div>").appendTo(document.body);
    }
    $("div").click(function () {
      $(this).hide(2000, function () {
        $(this).remove();
      });
    });

  });
  </script>
  <style>

  div { background:#ece0fb; width:30px; 
        height:40px; margin:2px; float:left; }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

נסה זאת בעצמך

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

כן לא

hide()

.hide( )

.hide()

.hide( duration, [ callback ] )

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

דוגמאות

דוגמה 1

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

דוגמה 2

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

דוגמה 3

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

דוגמה 4

תגובות