2012-05-26 72 views
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'}); 
      }); 
+0

你看過hoverintent嗎? –

+0

謝謝你的擡頭。我確實看了一眼......它也可以工作,但我希望沒有額外的插件就可以做到。我相信我會最終遷移到它......像許多開發人員正在使用它的接縫 – Taylor

+0

仍然沒有解決方案...看起來我會比我更早使用hoverintent – Taylor

回答

2

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

+0

這是更優雅,如果你只是必須從一個地方調用一個單一對象的動畫代碼,因爲它是內聯的並且保留了閉合。 但是,如果您需要從多個位置調用它,則應該將動畫代碼分解爲其單獨的函數 –

+0

像魅力一樣工作......謝謝! – Taylor

+0

你介意提供一個將動畫分解成單獨函數的例子......我將使用它來左右兩邊,例如向前向後。再次感謝!! – Taylor

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

這並沒有奏效......即使在鼠標移出後,.forward仍保持活動狀態 – Taylor

+0

謝謝......我剛剛注意到了更新 – Taylor