将鼠标移到/移出 div 时淡入/淡出 div 中的元素答案

【问题标题】：Fade in/out an element in a div with mouse over/out of div将鼠标移到/移出 div 时淡入/淡出 div 中的元素
【发布时间】：2012-08-24 07:50:27
【问题描述】：

对不起这个愚蠢的标题，我想不出别的，对不起，如果有人已经问过这个，我找不到。

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

有没有人能解决这个问题？谢谢

【问题讨论】：

标签： jquery gallery mouseover fade mouseout

【解决方案1】：

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

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

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

jsFiddle updated

【讨论】：

更新了，现在才看到
这是一种解决方法，但太复杂了，无论如何感谢您的努力！ :)

【解决方案2】：

你应该使用hover函数：

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

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

【讨论】：

【解决方案3】：

为什么不用 CSS 过渡呢？除了 IE http://caniuse.com/#search=transition

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

【讨论】：

因为我问怎么用 JavaScript 来做。