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才能使这段代码正常工作。

＆＃13;

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

＆＃13;

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

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

1 个答案: