Как остановить анимацию Javascript/jquery?

Question

Алексей @VortexHum

Как остановить анимацию Javascript/jquery?

Помогите разобраться! Есть две кнопки: одна уменьшает размер блока, вторая- увеличивает. Но если нажимать много раз на любую из клавиш, то объект будет уменьшаться и уменьшаться. Также и со второй. Нужно, чтобы кнопки увеличивали и уменьшали объект только один раз и прекращали, а получается, что уменьшается и увеличивается бесконечно (сколько раз нажмешь).

Вопрос задан более трёх лет назад
5274 просмотра

2 комментария

Подписаться 4 Оценить 2 комментария

Алексей @VortexHum Автор вопроса

@Fraideron

<script type="text/javascript">
      $(document).ready(function() {
        $(".news").click(function event() {
      $(".table").animate({
                  "margin-right": "+=60px",    
                  "height": "+=40px",
                  "width": "+=100px",
                }, 1000);
          });
      });
      </script>

Это кнопка, которая возвращает.

<script type="text/javascript">
           $(document).ready(function arr() {
            $(".funct_btn").click(function event() {
      
       $(".table").animate({
                  "margin-right": "-=60px",    
                  "height": "=-40px",
                  "width": "-=100px",
                }, 1000); 
               });
             });
           $("#stop-link").bind(function() {
            $(".funct_btn").queue("fx", []);
            return false;
           });
        </script>

Написано более трёх лет назад

Алексей @VortexHum Автор вопроса

В общем-то да, я пытался разными способами останавливать(stop()). А так для этого и создал обратную кнопку. Только если нажать несколько раз, то объект до жути сжимается.

Написано более трёх лет назад

@Fraideron
<script type="text/javascript"> $(document).ready(function() { $(".news").click(function event() { $(".table").animate({ "margin-right": "+=60px", "height": "+=40px", "width": "+=100px", }, 1000); }); }); </script>

Это кнопка, которая возвращает.
<script type="text/javascript"> $(document).ready(function arr() { $(".funct_btn").click(function event() { $(".table").animate({ "margin-right": "-=60px", "height": "=-40px", "width": "-=100px", }, 1000); }); }); $("#stop-link").bind(function() { $(".funct_btn").queue("fx", []); return false; }); </script>
В общем-то да, я пытался разными способами останавливать(stop()). А так для этого и создал обратную кнопку. Только если нажать несколько раз, то объект до жути сжимается.

Answer 1 · 2014-03-23 07:25:55

$(document).ready(function() {
var anim = false;
        $(".news").click(function event() {
if (anim==false) { //если анимация не идёт, то анимируем
anim=true;      
$(".table").animate({
                  "margin-right": "+=60px",    
                  "height": "+=40px",
                  "width": "+=100px",
                }, 1000, function () { //функция которая выполнится по окончанию анимации
anim= false;
});
          });
} 

      });

Как остановить анимацию Javascript/jquery?

Войдите на сайт