jquery - 将鼠标移到/移出 div 时淡入/淡出 div 中的元素

Question

对不起这个愚蠢的标题，我想不出其他任何东西，如果有人已经问过这个，我很抱歉，我找不到它。

无论如何，我正在用 jQuery 制作一个画廊。我在该 div 中有一个 div 和一个图片以及上一个/下一个按钮。这些按钮位于图片上，我希望它们默认隐藏，当我将鼠标移到 div 上时淡入，当我将鼠标移出 div 时淡出。问题是当我将鼠标从图片移动到按钮时，javascript 将其注册为 mouseout 事件，即使我实际上并没有离开保存图片和按钮的 div。我做了一个快速的小提琴向你展示发生了什么：http: //jsfiddle.net/7Ppbm/

有没有人可以解决这个问题？谢谢

Answer 1

您应该使用以下hover功能：

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

$("#container").hover(function(){
    $("#button").fadeIn();
},function(){
    $("#button").fadeOut();
});

Answer 2

你缺少的是一个超时，它会阻止它一次又一次地淡出。另外，请使用.on()jQuery 1.7.2 的新功能

$("#button").fadeOut();
var timer;

$("#container img").on({
    mouseover: function () {
        clearTimeout(timer);
        $("#button").fadeIn();
    },
    mouseout : function () {
        timer = setTimeout(function () { 
            $("#button").fadeOut();
        }, 100);
    }
});

jsFiddle 更新了

Answer 3

为什么不使用 CSS 过渡呢？它们在除 IE < 10 之外的所有地方都受支持。 http://caniuse.com/#search=transition

您的示例已修改：http: //jsfiddle.net/b4e4M/