Javascript clearInterval по щелчку

Question

Я написал небольшую функцию, которая перемещает/bouces кнопку каждые 5 секунд примерно так:

HTML:

<a href="#" class="button">Text</a> 

JS:

var interval; 
function buttonShake(){ 
    var times = 5; 
    var speed = 300; 
    var distance = '15px'; 

    for(var i = 0; i < times; i++) { 
     twitterButton.animate({ 
      left: '-='+distance 
     }, speed).animate({ 
      left: '+='+distance 
     }, speed); 
    } 
} 
interval = setInterval(buttonShake, 4000); 

Что делает кнопка при нажатии, она скрывает скрытый прямоугольник с правой стороны страницы. То, что я пытаюсь сделать, не позволяет кнопке отскакивать после ее нажатия.

Так что я попытался с помощью следующего

button.on('click', function(e){ 

    // do the slideout animation 
    // add "open" class to the box 

    if(box.hasClass('open')){ 
     clearInterval(interval); 
    } 

}); 

В button и box элементов были правильно определены и open класса добавляются к коробке, когда он скользит, однако очистка интервала не кажется, за работой. Он все еще непрерывно вызывает функцию buttonShake() каждые 5 секунд.

Вот в JSFiddle с полным кодом для предварительного просмотра:

http://jsfiddle.net/30tsype8/3/

я делаю что-то здесь?

Answer 1

Я заметил, что если вы оставите его какое-то время, анимация, похоже, перейдет в овердрайв и вместо того, чтобы работать в течение 3 секунд и приостанавливается на секунду, прежде чем начинать снова, она просто постоянно отскакивает. Я думаю, что jQuery перекрывает свои вызовы и запутывается и застревает в цикле.

Как вы хотите, чтобы остановить подпрыгивая кнопку, когда они расширяют панель, я бы сразу же закончить анимацию, панель расширилась с помощью finish():

twitterWrapper.animate({ 
    right: right 
}, function() { 
    twitterButton.finish(); 
}); 

Updated fiddle