jQuery动画没有停止

Question

Fiddle

请看一下上面的小提琴。基本上我想在点击opacity按钮后让闪烁的LED停止（1回到stop!）动画。

奇怪的是，它并不是一直都在工作。即使单击stop按钮，动画也会继续滚动。

我尝试过的事情：

1. .stop（）
2. 的 .stop（真）
3. 的 .finish（）
4. 的 .clearQueue（）。停止（）
5. 的 .clearQueue（）。光洁度（）

有什么可能是错的线索。？

谢谢！

Answer 1

请参阅demo

在stop()函数中删除此行，它将再次调用animate()函数

//$('.led-green').animate({opacity: 1},1000);

更改此

$('#stop').click(function() {    
    $('.led-green').stop();
    $('.led-green').css('opacity', '1');
});

Answer 2

似乎可以使用clearQueue（）和finish（），看看它是否符合您的需求：

$('#start').click( function(){
    animation();
});

$('#stop').click(function() {  
    $led = $('.led-green');
    $led.animate({opacity: 1},100, function(){
                        $led.clearQueue();
                        $led.finish();
                    });

});

function animation(){

     $('.led-green').animate({opacity: 0.5}, 500)
                    .animate({opacity: 1}, 500, function(){
                        animation();
                    });
}

您可以查看小提琴here

Answer 3

请检查Fiddle

var animation;
$('#start').click( function(){
   animate();
});

$('#stop').click(function() {    
  $('.led-green').animate({opacity: 1},100);
  animation.stop();
});

function animate(){
   animation = $('.led-green').animate({opacity: 0.5}, 1000);

   animation.animate({opacity: 1}, 1000, function(){
   animate()
});
}