0

我的<div>网页上有一个，当你将鼠标悬停在它上面时，我希望它的不透明度为 1，但是当鼠标没有悬停在它上面时，我希望它淡化为 0.3 的不透明度。我的问题是，目前当我将鼠标悬停在<div>它上面时，它会开始淡入淡出几次（而不仅仅是一次）。我不确定这是否是原因，但我怀疑这是因为它检测到鼠标在<div>我设置为淡出的那个中的多个 s 上滚动。

这是我网页的一个非常简化的部分，以说明我到目前为止所拥有的内容：

<div id="div1">
    <div id="div2" onmouseover="fadeElementTo('div1', 500, 1)" onmouseout="fadeElementTo('div1', 500, 0.3)">
        <div id="div3">
            <div id="div4">
            </div>
        </div>
    <button id="myButton" onclick="doACoolAnimation()" ></button>
    </div>
</div>

我的fadeElementTo()功能很简单：

function fadeElementTo(eid, speed, opacity, callback) {
    $("#" + eid).fadeTo(speed, opacity, callback);
}

如果它是相关的，我还有一个按钮，div只需在单击按钮时向左或向右移动即可动画相同的按钮。

function doACoolAnimation() {
    var hiddenState = GLOBAL_VAR.hiddenState;

    // If the <div> is already hidden, make it visible
    if (hiddenState == null || hiddenState == 1) {
        GLOBAL_VAR.hiddenState = 0;
        $("#div1").animate({
            left: "0px"
        }, 1500);
    }
    // Otherwise, hide it
    else {
        GLOBAL_VAR.hiddenState = 1;
        $("#div1").animate({
            left: "-800px"
        }, 1500);
    }
}

任何想法可能导致我的错误？更好的是，我能做些什么来解决它？

4

3 回答 3

5

尝试onmouseenter而不是onmouseover使用 jQuery 来附加/绑定这些事件而不是属性，因此它在所有浏览器中的工作方式都相同。

$('#outer').mouseenter(function() {
  $('#log').append('<div>Handler for .mouseenter() called.</div>');
});

看这里

于 2013-06-06T22:13:28.860 回答
1

使用mouseenterevent 来停止事件冒泡，并使用stop方法来确保清除该元素上未完成的动画。

$('#div2').mouseenter(function(){
    $('#div1').stop().fadeTo(500,1);
});
于 2013-06-06T22:31:11.190 回答
0

它多次检测事件。例如，如果要更改大小，即使鼠标不在 div 上，快速打开和关闭也会更改大小。当鼠标不在div上时，代码需要退出程序。为此，您可能会在鼠标不在 div 顶部时杀死代码的代码中包含代码，这样排队的淡入淡出/动画就不会运行。

编辑： 尝试查看 JQuery 文档，看看是否有任何可以使用的东西。您也许可以使用这些：

于 2013-06-06T22:18:09.800 回答