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

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

在此先感谢！

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

来源

2012-05-26 Taylor

你看过hoverintent吗？ –

谢谢你的抬头。我确实看了一眼......它也可以工作，但我希望没有额外的插件就可以做到。我相信我会最终迁移到它......像许多开发人员正在使用它的接缝 – Taylor

仍然没有解决方案...看起来我会比我更早使用hoverintent – Taylor

您可以使用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

来源

2012-05-26 06:56:56 thecodeparadox

这是更优雅，如果你只是必须从一个地方调用一个单一对象的动画代码，因为它是内联的并且保留了闭合。但是，如果您需要从多个位置调用它，则应该将动画代码分解为其单独的函数 –

像魅力一样工作......谢谢！ – Taylor

你介意提供一个将动画分解成单独函数的例子......我将使用它来左右两边，例如向前向后。再次感谢！！ – Taylor

你需要调用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-26 07:00:53

这并没有奏效......即使在鼠标移出后，.forward仍保持活动状态 – Taylor

谢谢......我刚刚注意到了更新 – Taylor

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

回答

相关问题