jQuery 动画的承诺

Question

我有一个图像向右移动，一旦它完成运行就会弹出一条警告消息。我正在使用 jQuery promises stop() 选项之一在动画完成之前停止它。到目前为止，我可以用鼠标 hover() 事件停止它。这是我的做法

    $(document).ready(function(){

    var logoVar = $('#logo');

    logoVar.animate(
    {
        left: '600px'
    },
    {
        duration: 8000,
        done: function(){
            alert( 'animation is done!');
        }
    });

    $('#logo').hover(function(){ // hover over the animating image to stop it without letting it to get completed 
        logoVar.stop();
    });
});

现在我想绑定几个鼠标事件，例如 mouseenter、mouseleave 而不是 hove() 以确保动画是准确响应所有鼠标事件处理程序，因为我注意到 Chrome 对 hover()[= 的响应较晚38=] 事件，当我将鼠标悬停在图像上时我无法阻止它。但是，我使用 FIDDLE 检查并获得了精确的结果。 hover() 工作得很好

我尝试使用

.on('mouseenter mouseleave mouseup mousedown')

我想我没有正确绑定它们。有人可以给我任何想法吗？如果我能得到完整的答案，我将不胜感激

在这里使用 on.() 但是控制台上甚至没有错误。图像也没有移动

$(document).ready(function(){ var logoVar = $('#logo'); logoVar.animate( { left: '600px' }, { duration: 8000, done: function(){ alert('in animation done!'); } }); logoVar.on('mouseenter mouseleave') logoVar.stop(); });

Answer 1

感谢@FredericHamidy 我找到了丢失的东西

$(document).ready(function(){

    var logoVar = $('#logo');

    logoVar.animate(
    {
        left: '600px'
    },
    {
        duration: 8000,
        done: function(){
            alert('in animation done!');
        }
        });
        logoVar.on('mouseenter mouselease', function(){
        logoVar.stop(); 
    })  
});

jQuery 动画的承诺

Promises of jQuery Animation

jquery

jquery-animate