остановить элемент от пульсирующего jquery

Question

У меня есть следующий jquery, который пульсирует ссылку кнопки.

 $('#BtnBoxGreeting').effect('pulsate', { times: 3 }, 800,function(){
                                        setInterval(function(){
                                        $('#BtnBoxGreeting').show('pulsate', { times: 3 }, 800, '');
                                        },8000);
                                         });
                <% end %>
                $('#BtnBoxGreeting').click(function(){
                    $(this).stop();
                });

Я хочу, чтобы эффект останавливался при нажатии кнопки, но он просто продолжает работать из-за интервала цикла.Как остановить анимацию при нажатии кнопки?

Answer 1

1. Создайте внешнюю переменную, скажем, var pulsatingInterval

2. Назначьте setInterval вызов этого:

   pulsatingInterval = setInterval(...);

3. Очистить этот интервал при нажатии кнопки

   clearInterval(pulsatingInterval);

Answer 2

Мне показалось, что следующее решение самое простое и работает очень хорошо.

Я даю класс 'пульсировать' элементу, который хочу пульсировать следующим образом:

<div id="buttons">
<%= link_to '', new_greeting_path, :remote => true, :id => "BtnBoxGreeting", :class => "button-post pulsate" %>
</div>

По нажатию кнопки я удаляю класс:

var greeting_timing = 8000;
             $('.pulsate').effect('pulsate', { times: 3 }, 800,function(){
                                    setInterval(showPulsating, greeting_timing);
                                });
                                function showPulsating(){
                                    $('.pulsate').effect('pulsate', { times: 3 }, 800, ''); 
                                }
                $("div#buttons>a").click(function(){
                    $(this).removeClass("pulsate");
                });

Таким образом, мне не нужно было беспокоиться о том, что Интервал начинается снова.

Answer 3

Я думаю, вам нужно установить переменную, которая указывает, нажимается ли стоп.Если это так, не выполняйте пульсирующее действие в методе setinterval (включите if в эту переменную).Конечно, после истечения времени ожидания вы больше не можете останавливать действие пульса.

Пример:

var stopped = false;

$('#BtnBoxGreeting').effect('pulsate', { times: 3 }, 800,function(){ 
    setInterval(showPulsating, 8000); 
}); 

function showPulsating(){
   if(!stopped)
      $('#BtnBoxGreeting').show('pulsate', { times: 3 }, 800, ''); 
}

$('#BtnBoxGreeting').click(function(){ 
   stopped = true;
}); 

Answer 4

когда вы $ (this) .stop ();ЭТА часть относится к действию нажатия кнопки, а не к эффекту.проверьте опцию .stop () здесь: http://api.jquery.com/stop/

Ставлю что-то вроде $ ('# BtnBoxGreeting'). stop () будет работать.