show()

.show( )

מחזירה: jQuery

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

.show()

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

.show( duration, [ callback ] )

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

duration

מחרוזת, מספר

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

callback

פונקציה

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

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

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

duration

מחרוזת, מספר

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

easing

מחרוזת

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

callback

פונקציה

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

ללא פרמטרים, שיטה .show() היא דרך הפשוטה להציג אלמנט:

$('.target').show();

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

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

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

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

דוגמאות

דוגמה 1

מציג כל הפסקאות

$("p").show()

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

נסה זאת בעצמך

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

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script>
  $(document).ready(function(){
    $("p").show()
  });
  </script>
</head>
<body>
  <p style="display:none">Hello 1</p>
lt;/body>
</html>

נסה זאת בעצמך

דוגמה 2

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

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

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

נסה זאת בעצמך

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

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){
    $("button").click(function () {
      $("p").show("slow");
    });
  });
  </script>
  <style>
  p { background:yellow; }
  </style>
</head>
<body>
  <button>Show it</button>
  <p style="display: none">Hello  2</p>
</body>
</html>

נסה זאת בעצמך

דוגמה 3

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

    $("#showr").click(function () {
      $("div:eq(0)").show("fast", function () {
        // use callee so don't have to name the function
        $(this).next().show("fast", arguments.callee); 
      });
    });
    $("#hidr").click(function () {
      $("div").hide(2000);
    });

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

נסה זאת בעצמך

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

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script>
  $(document).ready(function(){
    $("#showr").click(function () {
      $("div:eq(0)").show("fast", function () {
        // use callee so don't have to name the function
        $(this).next().show("fast", arguments.callee); 
      });
    });
    $("#hidr").click(function () {
      $("div").hide(2000);
    });
  });
  </script>
  <style>
  div { background:#def3ca; margin:3px; width:80px; 
        display:none; float:left; text-align:center; }
  </style>
</head>
<body>
  <button id="showr">Show</button>
  <button id="hidr">Hide</button>
  <div>Hello 3,</div>
  <div>how</div>
  <div>are</div>
  <div>you?</div>
</body>
</html>

נסה זאת בעצמך

דוגמה 4

מציג כל האלמנטים המוסתרים span ו- input לפי הסדר בעמצאות מצב מהירות normal. בסיום האנימציה משנה טקסט של פסקה.

    function doIt() {
      $("span,div").show("normal");
    }
    $("button").click(doIt); // can pass in function name
    $("form").submit(function () {
      if ($("input").val() == "yes") {
        $("p").show(4000, function () {
          $(this).text("Ok, DONE! (now showing)");
        });
      }
      $("span,div").hide("normal");
      return false; // to stop the submit
    });

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

נסה זאת בעצמך

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

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script>
  $(document).ready(function(){
    function doIt() {
      $("span,div").show("normal");
    }
    $("button").click(doIt); // can pass in function name
    $("form").submit(function () {
      if ($("input").val() == "yes") {
        $("p").show(4000, function () {
          $(this).text("Ok, DONE! (now showing)");
        });
      }
      $("span,div").hide("normal");
      return false; // to stop the submit
    });
  });
  </script>
  <style>
  span { display:none; }
  div { display:none; }
  p { font-weight:bold; background-color:#fcd; }
  </style>
</head>
<body>
  <button>Do it!</button>
  <span>Are you sure? (type 'yes' if you are) </span>
  <div>
    <form>
      <input type="text"  value="as;ldkfjalsdf"/>
    </form>
  </div>
  <p style="display:none;">I'm hidden...</p>
</body>
</html>

נסה זאת בעצמך

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

כן לא

show()

.show( )

.show()

.show( duration, [ callback ] )

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

דוגמאות

דוגמה 1

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

דוגמה 2

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

דוגמה 3

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

דוגמה 4

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

תגובות