Question

我试图实现其他解决方案，但没有运气...希望有人可以帮助解决我的悬停延迟问题...我只需要在鼠标输出上添加一个短暂的延迟。

提前致谢！

            $('.forward').css({opacity:0, right:0});
            $('.hover-area').hover(function() {
                $(this).find('.forward').stop()
                    .animate({right:20}, {queue:false, duration:300, easing:'easeOutCubic'})
                    .animate({opacity:'0.95'}, {queue:false, duration:400, easing:'easeOutCubic'});
            },function() {
                $(this).find('.forward').stop()
                    .animate({right:0}, {queue:false, duration:550, easing:'easeOutSine'})
                    .animate({opacity:'0'}, {queue:false, duration:300, easing:'easeOutSine'});
            });

Answer 1

您可以setTimeout()使用mouseout制作延迟。

$('.forward').css({opacity:0, right:0});

    function toogler(element, showHide) {
        if (showHide == 'show') {
            $(element).find('.forward').stop().animate({
                right: 20
            }, {
                queue: false,
                duration: 300,
                easing: 'easeOutCubic'
            }).animate({
                opacity: '0.95'
            }, {
                queue: false,
                duration: 400,
                easing: 'easeOutCubic'
            });
        } else {
            setTimeout(function() {
                $(element).find('.forward').stop().animate({
                    right: 0
                }, {
                    queue: false,
                    duration: 550,
                    easing: 'easeOutSine'
                }).animate({
                    opacity: 0
                }, {
                    queue: false,
                    duration: 300,
                    easing: 'easeOutSine'
                });
            }, 1000);
        }
    }

    $('.hover-area').hover(function() {
        toogler(this, 'show');
    }, function() {
        toogler(this, 'hide');
    });

<强> DEMO

Answer 2

您需要调用setTimeout函数，该函数将在给定的时间段后调用函数。建议按时间顺序跟踪动画代码的调用位置，这样就不会遇到动画制品。

var MOUSEOUT_ANIM_THRESHOLD = 5000;
var mouseInTime = {};

function onMouseOut( object, serial ) {
   if( serial < onMouseOut.serial ) {
       return;
   }

   $(object).find('.forward').stop()
       .animate({right:0}, {queue:false, duration:550, easing:'easeOutSine'})
       .animate({opacity:'0'}, {queue:false, duration:300, easing:'easeOutSine'});
}

onMouseOut.serial = 0;

$('.forward').css({opacity:0, right:0});
$('.hover-area').hover(function() {
    $(this).find('.forward').stop()
        .animate({right:20}, {queue:false, duration:300, easing:'easeOutCubic'})
        .animate({opacity:'0.95'}, {queue:false, duration:400, easing:'easeOutCubic'});

    mouseInTime[this] = new Date().getTime();
},function() {
    var deltaTime = new Date().getTime() - mouseInTime[this];

    if( deltaTime < MOUSEOUT_ANIM_THRESHOLD ) {
         setTimeout(onMouseOut, 250, this, onMouseOut.serial++); //250ms delay
    } else {
          $(object).find('.forward').stop()
              .animate({right:0}, {queue:false, duration:0})
              .animate({opacity:'0'}, {queue:false, duration:0});
    }
});

如何在鼠标移出时添加延迟

2 个答案: