添加延遲停止（）。hide（）

Question

我顯示/隱藏div懸停在另一個div上。

$(".div1, .div2").hover(
function() { 
    $(".div2").stop().show('slow'); 
}, function() { 
    $(".div2").stop().hide('slow'); 
}); 

https://jsfiddle.net/zvbtL71L/

這工作得很好。然而，div之間有一個很小的空間，所以當光標移動到第二個div時會有輕微的跳躍效果，或者如果光標位於它們之間的空隙中，它會消失。

對我的需要來說，通過在隱藏第二個div中添加延遲來解決這個問題就足夠了。我怎樣才能給皮包添加一個短暫的延遲？

Answer 1

嘗試

jQuery(function($) { 
 
    $('.div1').hover(function() { 
 
    var $target = $('.div2'); 
 
    clearTimeout($target.data('hoverTimer')); 
 
    $target.stop().slideDown(500); 
 
    }, function() { 
 
    var $target = $('.div2'); 
 
    var timer = setTimeout(function() { 
 
     $target.stop().slideUp(); 
 
    }, 200); 
 
    $target.data('hoverTimer', timer); 
 
    }); 
 

 
    $('.div2').hover(function() { 
 
    clearTimeout($(this).data('hoverTimer')); 
 
    }, function() { 
 
    $(this).stop().slideUp(); 
 
    }); 
 
});

.container { 
 
    position: relative; 
 
} 
 
.div1, 
 
.div2 { 
 
    padding: 20px; 
 
    width: 200px 
 
} 
 
.div1 { 
 
    background: #000; 
 
    color: #fff 
 
} 
 
.div2 { 
 
    background: #eee; 
 
} 
 
.div2 { 
 
    display: none; 
 
    position: absolute; 
 
    top: 70px; 
 
    left: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="div1">Hover over me</div> 
 
    <div class="div2">Show hide me</div> 
 
</div>

Answer 2

我發現，爲了設置定時器等來解決問題這樣總是變得混亂，並需要大量的代碼。如果你想要經常做這些事情，你應該考慮一個動畫庫，比如GSAP。使用它們的延遲和覆蓋功能，這變得小菜一碟：

$(".div1, .div2").hover(
function() { 
    tweenMax.to($(".div2"), .5, {display:'block', overwrite:1}); 
}, function() { 
    tweenMax.to($(".div2"), .5, {display:'none', delay:.1}); 
});