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

Question

[Алексей]

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

Comments

[Алексей]

@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

[Юрий Лобанов]

А почему Вы не используете toogleClass, к примеру?

upd: jsfiddle.net/iiil/e6wFz/1
В классы пишите что хотите.

Comments

[Алексей]

Дело в том, что я первый день практикуюсь с jquery) И пока просто не представляю, куда можно засунуть toogleClass.

[Юрий Лобанов]

@VortexHum ну я пример с addClass написал Вам, а насчет toggleClass - почитайте справку.

[Юрий Лобанов]

jsfiddle.net/iiil/e6wFz/3 @VortexHum

[Алексей]

Спасибо! Буду пробовать.

Answer 2

[Роман Якушев]

$(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;
});
          });
} 

      });

Comments

[Алексей]

Спасибо!

Answer 3

[Валерий Демидов]

Поставь, что-то типа флага в коде, который будет отвечать за последнее действие и если оно совпадает с предыдущим, то выполнятся не будет... Задача бы упрощалась в разы, если бы посмотреть твой код.