1

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

提前致谢！

            $('.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'});
            });
4

2 回答 2

2

您可以使用setTimeout()for make delay on 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');
    });​

演示

于 2012-05-26T06:56:56.593 回答
0

您需要调用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});
    }
});
于 2012-05-26T07:00:53.050 回答