悬停时在列表中向下滑动描述延迟 jquery

Question

我有一个网格中的产品列表。当您将鼠标悬停在结果上时，经过短暂的延迟，我想向下滑动描述以显示更多信息。现在我有一些工作代码，但有副作用。使用下面的代码，当您将鼠标快速移过所有这些时，它会触发延迟，然后显示您悬停过的所有那些。现在，因为您的鼠标不再位于结果上，所以它不会隐藏它们，因为没有鼠标移出。我想做的只是在鼠标移出延迟和滑动备份后鼠标仍然停留在它们上面时才显示它们。有人可以帮助我调整此代码以使其正常工作吗？

 <div class="listing">
     Title 1
     <div class="offer">
           offer 1
          <div class="invisibleAfterLayer">description 1</div>
     </div>
 </div>
 <div class="listing" style="margin-top:10px">
     Title 2
     <div class="offer">
         offer 2
          <div class="invisibleAfterLayer">description 2</div>
     </div>
 </div>

    .invisiblelayer{display:none}

    $('.invisibleAfterLayer').addClass("invisiblelayer");

    $(".listing").on('mouseenter', function () {
        var parent = $(this);

        setTimeoutConst = setTimeout(function () {
            $('.offer .invisibleAfterLayer ', $(this)).slideDown();
        }, delay);
    }).on('mouseleave', function () {
        $('.invisibleAfterLayer').slideUp();
    });

jsfiddle http://jsfiddle.net/nbdpbes0/

Answer 1

Code Junkie，我认为您需要设置 clearTimeout 才能使这段代码正常工作。

var t;

$(".listing")
.on('mouseenter', function() {
    var $this = $(this)
    t = setTimeout(function() {
      $this.find('.invisiblelayer').slideDown("slow");
      }, 1500);
        
}).on('mouseleave', function() { 
     clearTimeout(t);
     $(this).find('.invisiblelayer').slideUp("slow"); 
});

jsfiddle: http://jsfiddle.net/aysberg/bncdn1b1/

悬停时在列表中向下滑动描述延迟 jquery

Slide down description in list on hover with a delay jquery

jquery