Question

当鼠标悬停在div（#sliderBox）上时，我需要一个div（#thumbnails）来显示和隐藏。为此，我使用了hoverIntent插件并像魅力一样工作。

我还希望div（#thumbnails）在空闲5秒时fadeOut。我设法使用setTimeout（）;

使其工作

我的问题是：如果我在#sliderBox div上闲置，那么当我再次移动鼠标时，＃thumbnails div将不会淡入。我必须将我的鼠标光标从#sliderBox div中取出并再次悬停在它上面，以便再次使#thumbnails div fadeIn。

有什么方法可以解决这个问题吗？

这是我的代码：

$(document).ready(function() {

$("#thumbnails").hide();

$("#sliderBox").hoverIntent(showThumbs, hideThumbs);

  var timer;

  $(document).mousemove(function() {

        if (timer) {
            clearTimeout(timer);
            timer = 0;
        }

        timer = setTimeout(function() {
            $('#thumbnails').fadeOut(1000)
            }, 5000)
   });


 });

    function showThumbs(){ $("#thumbnails").fadeIn(1000);}
    function hideThumbs(){ $("#thumbnails").fadeOut(800);}

Answer 1

问题在于插件，它会在mouseenter上触发，因此在您离开并再次进入之前不会触发。唯一的解决方案是修改插件本身，以便在mouseenter或mousemove上触发（仅在延迟之后）。该插件看起来非常简单，并且评论很好。我不认为修改会太难。

祝你好运，加快速度！

Answer 2

您应该可以在不需要编辑插件的情况下执行此操作。

除了处理文档的'mousemove'之外，处理sliderBox的'mousemove'，独立于插件但调用相同的showThumbs()函数。

代码将是这样的（未经测试）：

$(function(){
    var timer, $thumbnails = $("#thumbnails").hide();
    function showThumbs(){
        if($thumbnails.is(":hidden")){
            $thumbnails.fadeIn(1000);
        }
    }
    function hideThumbs(){ $thumbnails.fadeOut(800); }
    $("#sliderBox").on('mousemove', showThumbs).hoverIntent(showThumbs, hideThumbs);
    $(document).on('mousemove', function(){
        clearTimeout(timer);
        timer = setTimeout(hideThumbs, 5000);
    });
});

在showThumbs()中，您会看到我已$thumbnails.fadeIn(1000)有条件。这是完全没必要的，但是showThumbs()要做的工作少了，这是一个重要的考虑因素，因为它被附加为'onmousemove'处理程序。

需要有关使用clearTimeout（）的帮助;和setTimeout）;找不到解决方案

2 个答案: