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 );
    });

http://jsfidd.net/p4enD/10/" rel = "notfollow" >DEMO

Answer 2

您需要调用< a href=> “ https:// developmenter.mozilla. org/ en/ DOM/ window. setTimeout" rel=“ nofollow” >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});
    }
});

友情链接