javascript - 使用 jQuery 在图像上鼠标悬停时淡入/淡出按钮。一些需要解决的错误

Question

所以，我基本上已经有了我想要的东西，非常简单，但是有一些错误。我只是想要当你将鼠标悬停在图像上时，图像上会出现两个左/右按钮，允许你单击其他图像。然后，当您离开图像区域(不包括左/右按钮)时，按钮再次淡出。这是我得到的:

$(document).ready(function() {
    $('#image-slider').mouseenter(function(){
        $('.next').fadeIn('50');
        $('.prev').fadeIn('50');
    }).mouseout(function(){
        $('.next').fadeOut('50');
        $('.prev').fadeOut('50');
    });
});

错误 #1:但是，当您将鼠标悬停在图像上时，按钮会出现，如果您将鼠标悬停在按钮上，它们就会消失。当然，他们当然会这样做，这是因为我在离开图像区域时告诉他们要淡出。首先，即使您将鼠标悬停在它们上方，我也需要它们保持可见。所以我需要以某种方式将按钮作为图像区域的一部分包含在我的 javascript 中。这是第一个问题/

错误 #2:这是我在 javascript 中看到的一个常见问题。当您将鼠标悬停在图像上时，按钮会淡入，悬停关闭，它们会淡出。当然，这是有持续时间的，如果你在持续时间结束之前一直在进/出/进/出/进/出中盘旋，那么当你让它飞起来时，它会一直开、关、开、关。我怎样才能防止这种情况发生？因此，当按钮淡入时，您将鼠标悬停在图像区域之外，它只是停止其轨道中的动画序列，因此您不会连续淡入/淡出。

提前致谢!~ jackson

预计到达时间:修复

我解决了!你的修复和@Pumou 的组合。

我制作了另一个 div 只是为了包裹这两个项目并将其展开以覆盖图像，然后我将鼠标悬停设置为那个 div。问题 #1 解决了。

我使用 puormo 的 .fadeTo() 技巧来解决问题 #2。

然后，我利用大家的调整来缩短代码，使其整洁。感谢大家!

我决定采用@jfriend00 的解决方案。这是最短的，很棒的作品!

这是我最终的 javascript:

$(document).ready(function() {
    var b = $('.ps_next, .ps_prev');
    $('#slider-wrapper').bind('mouseenter mouseleave', function(e) {    
       var check = ( e.type === 'mouseenter' ) ?
          ( b.stop(0,1).fadeIn(100)  ) :
          ( b.stop(0,1).fadeOut(100) ) ;
    });
});

Answer 1

问题 #2 可以用 .stop() 解决这会强制任何先前的动画在开始下一个动画之前结束。

$(document).ready(function() {
    $('#imageContainer').hover(function() {
        $('.ps_next').stop(true, true).fadeIn(400);
        $('.ps_prev').stop(true, true).fadeIn(400);
    }, function () {
        $('.ps_next').stop(true, true).fadeOut(400);
        $('.ps_prev').stop(true, true).fadeOut(400);
    });
});

使用 .hover() 可能会更好处理进入和离开而不是 mouseenter() 的 jQuery 函数和 mouseout() .

您可以看到 .stop() 的两个示例和 .hover()在 this jQuery doc page做几乎与你完全相同的事情。

对于问题 #1，我认为我们需要查看您的 HTML 的结构才能知道如何最好地就此提出建议，因为它们有多种选择，具体取决于事物的结构。您还可以在延迟上执行 fadeOut，如果它们悬停在按钮上则取消该延迟，以便有时间在它们消失之前将鼠标移到按钮上。或者，您可以使用 .hover()在包含图像和按钮的容器上。

你可以看到它在这里工作:http://jsfiddle.net/jfriend00/Zk6rY/ .

进一步缩短了代码(如上面的 jsFiddle 所示):

$(document).ready(function() {
    $('#imageContainer').hover(function() {
        $('.ps_button').stop(true, true).fadeIn(400);
    }, function () {
        $('.ps_button').stop(true, true).fadeOut(400);
    });
});