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 对 悬停（） 事件的响应较晚，当我将鼠标悬停在图片上时，我无法停止。但是，我使用FIDDLE检查并获得了精确的结果。 hover（）效果很好

我尝试使用

.on('mouseenter mouseleave mouseup mousedown')

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

在这里使用。（），但控制台上甚至没有错误。图像也没有移动

$(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动画的承诺

1 个答案: