Question

以下是一个框的代码，该框有一个滑动选项（.box-options），在mouseenter上开箱即用，增加了1000毫秒的延迟

如果在完成1000毫秒之前鼠标不在该框中，我想停止动画（或滑动它的选项）

我不想使用任何外部插件，只有JQuery我有。

$('.box').on('mouseenter', function(){
        $(this).find('.box-options').stop().delay(1000).animate({
            right: "-42"
        },400);
    });

Answer 1

您可以执行以下操作，假设您希望在鼠标停留在框上方时将动画冻结在其轨道中。

var animInProgress = false;

$('.box').on('mouseenter', function(){
        $(this).find('.box-options').animate({
        right: "-42"
    },400);
        animInProgress = true;
        setTimeout(stop_animation,1000);
});

$('.box').on('mouseleave', function(){
    // if the mouse leaves the box before the animation is finished
    if(animInProgress) {

        // stop the animation
         $(this).find('.box-options').stop()
        // or do something else (revert to original pos?)

}

});

function stop_animation() {    
    animInProgress = false;
}

Answer 2

我会使用CSS动画。它们不仅需要较少的工作来启动和运行，而且浏览器对CSS进行了优化，并且比同等的Javascript补间效果更有效。

对于这样的事情，我建议让on mouseenter事件将类应用于触发CSS动画的box-option元素。

$('.box').on('mouseenter', function() {
  $(this).find('.box-options').addClass('active');
}).on('mouseleave', function() {
  $(this).find('.box-options').removeClass('active');
});

当然，如果您对此很聪明，可以将CSS伪造选择器:hover与-webkit-transition结合使用，以实现所有这一切，而无需使用javascript。查看我的JSFiddle，它绝对不使用Javascript。这绝对是管理这种效果的最佳方式。

如何在延迟1000ms后停止鼠标中心动画（如果鼠标不再在该元素上）

2 个答案: