Javascript 使用jQuery在图像上方鼠标上的淡入/淡出按钮。需要解决的几个问题

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

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

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

Bug#2：这是我在javascript中看到的一个常见问题。当您将鼠标悬停在图像上时，按钮会淡入淡出。当然，这是有一个持续时间的，如果你在持续时间结束之前一直在盘旋in/out/in/out/in/out，那么当你让它飞的时候，它会时断时续。我怎样才能防止这种情况？也就是说，当按钮淡入时，您将鼠标悬停在图像区域之外，它只是停止动画序列的轨迹，这样您就不会连续淡入/淡出

提前谢谢！ ~z~杰克逊

埃塔：修复

我解决了！你的修复和@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) ) ;
    });
});

（通过标记和三元运算符的使用）

问题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（）

jQuery函数来处理进入和离开，而不是

mouseenter（）

和

mouseout（）

您可以看到

.stop（）

和

.hover（）

的示例，它们几乎与您做的事情完全相同

对于问题#1，我认为我们需要查看HTML的结构，以了解如何最好地对此提出建议，因为根据事物的结构，它们有多种选择。如果鼠标悬停在按钮上，你也可以在一个延迟上进行淡出，这个延迟被取消，这样在按钮消失之前，你就有时间让鼠标移到按钮上。或者，您可以在包含图像和按钮的容器上使用

.hover（）

您可以看到它在这里工作：

将代码（如上面的JSFIDLE所示）进一步缩短为：

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

我还使用了

stop（）。我还将其缩短为使用一个选择器来选择两个按钮（在本例中，它被设置为变量
$buttons
）

我注意到，如果您的鼠标输入image div，然后向左，然后再次输入，则由于
stop（），按钮的不透明度逐渐降低到50%。我通过使用
fadeTo（）修复了这个问题功能：第一个是持续时间，与您的一样设置为50，第二个是要淡入的不透明度（0到1之间的数字）

我还解决了当你将鼠标悬停在按钮上方时，按钮保持在那里的问题。请看这一行：

$buttons.mouseenter(function() { $buttons.show(); });

这只是使用
show（）
，它提供元素
显示：块鼠标悬停

此处示例：

更多关于
stop（）此处：

更多关于
fadeTo（）此处：

编辑：更新了代码，使其现在使用jQuery的
hover（）函数。代码越短越好

$(document).ready(function() {
    var $buttons = $('.next, .prev')
    $('#image-slider').hover(function(){
        $buttons.stop().fadeTo('50','1');
        $buttons.mouseenter(function() { $buttons.show(); });
    },
    function(){
        $buttons.stop().fadeTo('50','0');
    });
});

示例：

更多关于
hover（）此处：
你们可能都在寻找这个awsmness

$（文档）.ready（函数（）{
$（'#content'）。悬停（函数（）{
$（'.a'）.stop（true）.fadeTo（500,0.7）；
$（'.i'）.stop（true）.fadeTo（500,0.9）；
}，函数（）{
$（'.a'）。停止（真）。淡出（500）；
$（'.i'）.stop（true）.fadeTo（500,1）；
});
$（'.a'）。悬停（函数（）{
$（'.i'）.stop（true）.fadeTo（500,0.95）；
}，函数（）{
$（'.a'）.stop（true）.fadeTo（500,0.7）；
$（'.i'）.stop（true）.fadeTo（500,0.9）；
});
});

尝试创建一个。您是否意识到，每次悬停滑块时，页面上的所有元素都会被遍历4次，以查找类名为
next
和
prev
的元素？katspaugh的意思是（我认为）最好的方法是将元素缓存在变量中。
var btnNext=$（“#image slider.next”）
我刚刚发布了我的HTML，刷新。我看不出
#图像滑块
在你的HTML中的什么位置？可能最简单的解决方案是在同时包含图像和按钮的容器div上使用.hover（），这样鼠标被视为在其中一个上悬停，只有当鼠标同时离开图像和按钮时才会消失。我在我的答案中增加了一些选项。谢谢。停止（1,1）完全有效。非常感谢你！还有一个问题，除了@roXon建议的所有这些的快捷方式之外。另外，在你的小提琴中，我不明白为什么“真的，真的”是必要的，“1,1”用更少的字符做同样的事情。只是一个建议。从技术上讲，stop函数调用
Boolean
参数。布尔值的有效值是
true
和
false
，而不是
1
和
0
<代码>1
可能有效，但我不建议这样做。编写代码的目标是编写正确且可读的代码。当代码变得不太正确或可读性差，除了简短之外没有其他好处时，缩短代码是个坏主意。问题1
$buttons.mouseenter(function() { $buttons.show(); });

$(document).ready(function() {
    var $buttons = $('.next, .prev')
    $('#image-slider').hover(function(){
        $buttons.stop().fadeTo('50','1');
        $buttons.mouseenter(function() { $buttons.show(); });
    },
    function(){
        $buttons.stop().fadeTo('50','0');
    });
});