Jquery悬停功能未按预期工作

Question

我想让用户能够查看我开发的网站的完整屏幕截图，然后当他们将鼠标悬停在该网站上时，另一个 div 会淡入其中并包含一些元信息。

这是一个测试链接 - http://www.deanelliott.me/misc/test -port/index.html

正如您所看到的，如果您将鼠标悬停在幻灯片上，则会出现一个覆盖层，这很好，但是当您将鼠标悬停在幻灯片上并且下一张幻灯片开始播放时，覆盖层会在不应该可见的情况下可见是。

如果有人对问题是什么有任何想法那就太好了！

谢谢

编辑：这是相关代码

$(function(){
$('#slideshow').hover(
    function(){
            $('.slideimage').fadeOut(100, function(){
                    $('.slideoverlay').fadeIn(100);                                            
            });
    },
    function(){
            $('.slideoverlay').fadeOut(100, function(){
                    $('.slideimage').fadeIn(100);                                           
            });
    }
    );
});

.slideoverlay 通过 CSS 设置为 display:none

Answer 1

由于某种原因，您的 fadeIn() 被应用于所有幻灯片叠加，但 fadeOut() 仅应用于当前可见的幻灯片。我会尝试使 fadeIn() 和 fadeOut 仅影响您悬停在其上的实际内容。像这样的事情：

$(function(){
    $('#slideshow .slide').hover(
        function(){
            var $this = $(this);
            $this.find('.slideimage').fadeOut(100, function(){
                $this.find('.slideoverlay').fadeIn(100);                                            
            });
        },
        function(){
            var $this = $(this);
            $this.find('.slideoverlay').fadeOut(100, function(){
                $this.find('.slideimage').fadeIn(100);                                           
            });
        }
    );
});

可能可以使用一些优化，但我认为这应该可行。不过还没有测试过，祝你好运。

尝试用此方法消除白色闪光。基本上，我们的想法是，如果您只是将覆盖层覆盖在 $('.slideimage') 上，则无需隐藏它。您所需要做的就是隐藏和显示幻灯片。

$(function(){
    $('#slideshow .slide').hover(
        function(){
            var $this = $(this);
            $this.find('.slideoverlay').fadeIn(100);                                            
        },
        function(){
            var $this = $(this);
            $this.find('.slideoverlay').fadeOut(100);
        }
    );
});