stop

« Обратно к странице эффектов

[редактировать]

stop( [clearQueue], [gotoEnd] )

Останавливает все запущенные анимационные эффекты для всех указанных элементов.
Если есть какие-либо эффекты, ожидающие выполнения (и аргумент clearQueue не установлен в true),то они начнутся немедленно.
Аргументы:

clearQueue (необязательно) Логическое значение
При установке значения в true происходит очистка очереди эффектов.
gotoEnd (необязательно) Логическое значение
При установке значения в true происходит немедленное окончание работающих анимационных эффектов.
Примеры:

Нажмите кнопку «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 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-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>
Name Type