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

尝试

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

我发现设置计时器等以解决这样的问题总是变得混乱并且需要大量代码。如果你经常尝试做这些事情，你真的应该考虑一个动画库，比如GSAP。使用他们的延迟和覆盖功能，这变得轻而易举：

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

添加延迟到stop（）。hide（）

2 个答案: