stop()

.stop( [ clearQueue ], [ jumpToEnd ] )

מחזירה: jQuery

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

.stop( [ clearQueue ], [ jumpToEnd ] )

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

clearQueue

ערך בולאני

ערך בולאני המציין האם למחוק בתור אנימציה הנוכחית. ערך ברירת מחדל - false.

jumpToEnd

ערך בולאני

ערך בולאני הציין האם לסיים אנימציה נוכחית מייד. ערך ברירת מחדל - false.

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

אם מופעלת יותר משיטה אחת על אותו אלמנט, אנימציות מאוחרות יותר יכנסו לתוך התור על אפקטים של האלמנט. אנימציות האלה יתחילו לא לפני שראשונה תסתיים. כאשר מופעל .stop(), אנימציה הבאה בתוך התור תתחיל מייד. אם פרמטר clearQueue מוגדר ב- true, אנימציות אחרות בתוך התור ימחקו ולא יופעלו יותר.

אם מאפיין jumpToEnd מוגדר ב- true, אנימציה הנוכחית תעצר, ואלמנט מייד יעביר ערכי היעד עבור כל מאפיין של CSS. בדוגמה לעיל עם .slideUp(), אלמנט יוסתר מייד. פונקציה של קריאה חוזרת תופעל מייד, אם סופקה.

התועלת של .stop() ברורה, כאשר אנחנו זקוקים להפעיל אנימציה באמצעות mouseenter ו- mouseleave:

<div id="hoverme">
  Hover me
  <img id="hoverme" src="book.png" alt="" width="100" height="123" />
</div>

אנחנו יכולים ליצור אפקט נחמד של העברה חלקה בלי בעיות רגילות של מספר תורים של אנימציה, על ידי הוספת .stop(true, true) לשרשרת:

$('#hoverme-stop-2').hover(function() {
  $(this).find('img').stop(true, true).fadeOut();
}, function() {
  $(this).find('img').stop(true, true).fadeIn();
});

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

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

דוגמאות

תלחצו על כפתור «Go» כדי להפעיל אנימציה, אחרי זה «STOP» כדי לעצור. כפתור «STOP» עוצר רק אפקט הנוכחי, אבל לא מוחק את תור אפקטים.

    // Start animation
    $("#go").click(function(){
      $(".block").animate({left: '+=100px'}, 2000);
    });

    // Stop animation when button is clicked
    $("#stop").click(function(){
      $(".block").stop();
    });

    // Start animation in the opposite direction
    $("#back").click(function(){
      $(".block").animate({left: '-=100px'}, 2000);
    });

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

נסה זאת בעצמך

קוד מלא:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script>
  $(document).ready(function(){    
    // Start animation
    $("#go").click(function(){
      $(".block").animate({left: '+=100px'}, 2000);
    });
    // Stop animation when button is clicked
    $("#stop").click(function(){
      $(".block").stop();
    });
    // Start animation in the opposite direction
    $("#back").click(function(){
      $(".block").animate({left: '-=100px'}, 2000);
    });
  });
  </script>
  <style>div { 
    position: absolute; 
    background-color: #abc;
    left: 0px;
    top:30px;
    width: 60px; 
    height: 60px;
    margin: 5px; 
  }
  </style>
</head>
<body>
  <button id="go">Go</button> 
  <button id="stop">STOP!</button>
  <button id="back">Back</button>
  <div class="block"></div>
</body>
</html>

נסה זאת בעצמך

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

כן לא

stop()

.stop( [ clearQueue ], [ jumpToEnd ] )

.stop( [ clearQueue ], [ jumpToEnd ] )

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

דוגמאות

תגובות