Question

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

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

<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);
    }
}

任何想法可能导致我的错误？更好的是，我该怎么做才能解决它？

Answer 1

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

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

请参阅here

Answer 2

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

$('#div2').mouseenter(function(){
    $('#div1').stop().fadeTo(500,1);
});

Answer 3

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

修改： 尝试查看JQuery文档，看看是否有任何可以使用的东西。你可以使用这些：

使用'onmouseover'和'onmouseout'淡出<div>会发生几次</div>

3 个答案: