JQuery Animate 延迟问题

Question

下面是我的 HTML 和 JQuery 代码:

我有 HTML:

<div class="announcement">
    <img id="imgBanner" style="cursor: pointer;" onmouseover="showPopup();" />
</div>
<div id="divArrow" class="arrow">
    <img id="imgExpandContract" style="cursor: pointer;" alt="Arrow" border="0"onmouseover="showPopup();" />
</div>
<div id="window">
    <!-- some html content acting as a fly-out -->
</div>

JS 代码:

var imgBanner = "xyx.png";
var imgArrowExpand = "xyx.png";
var imgArrowContract = "xyx.png";
var isDone = false;

function showPopup() {
    try {
        var imgWidth = $("#imgExpandContract").width();
        var posX = document.getElementById("imgExpandContract").offsetLeft + imgWidth;
        if (!$("#window").is(":animated")) {
            $("#window").animate({ left: posX }, 800, 'easeOutSine',
                                function() {
                                    isDone = true;
                                    $("#imgExpandContract").attr("src", imgArrowContract);
                                    $("#window").bind("mouseenter", function() { $("#window").bind("mouseleave", function() { closePopup(); }); });
                                }
            );
        }
    }
    catch (error) {
        //disable the banner, arrow images
        document.getElementById("imgBanner").style.visibility = 'hidden';
        document.getElementById("imgExpandContract").style.visibility = 'hidden';
    }
}

function closePopup() {
    try {
        if (isDone) {
            var posY = $("#window").width();
            $("#window").animate({ left: -posY }, 600, 'linear',
                            function() {
                                isDone = false;
                                $("#imgExpandContract").attr("src", imgArrowExpand);
                                $("#window").unbind("mouseenter");
                                $("#window").unbind("mouseleave");
                            }
            );
        }
    }
    catch (error) {
        //disable the banner, arrow images
        document.getElementById("imgBanner").style.visibility = 'hidden';
        document.getElementById("imgExpandContract").style.visibility = 'hidden';
    }
}

我目前遇到两个问题:

1. 当我将鼠标移开 #window div 时，在调用 mouseleave 之前会出现短暂的延迟。我怎样才能让它消失？在导致鼠标离开之前，它会停留几毫秒。

2. mouseleave 事件有时不会触发...偶尔发生，但它确实发生了。我必须将鼠标移到 #window div 上然后向后移动(基本上必须执行两次)？谁能告诉我为什么会发生这种情况以及我该如何处理？

除了在 JQuery 中使用 animate() 之外，还有更好的解决方案吗？很乐意接受所有人/任何建议。我正在尝试对 div 内的内容执行 Fly-out/slideIn 效果。

非常感谢您的帮助

Answer 1

嗯，我不知道这会解决您所说的问题，但有很多事情会对您的代码整体有所帮助。例如我的第一印象是:

"Ok hes using jquery... wait i thought he was using jquery... WTF?".

1. 为什么使用getElementById？使用$('#myid')。
2. 为什么要使用style.visibility？使用 $(selector).css('visibility', value);
3. 不要使用元素属性来绑定(bind)事件...使用 jquery $(selector).hover(openPopup, closePopup);

好的，当 mouseleave 无法触发时，您确定鼠标离开了该区域吗？我的意思是你确定 div 的尺寸比你想象的要大一点吗？如果情况并非如此，则可能只是执行该函数所需的时间，或者可能是动画尚未完成(即 isDone = false)。在我看来，我不会尝试检测某些动画是否已完成，而是调用 $(element).stop(true); 在其端点处停止动画，然后继续执行其他操作动画片。这应该是非常安全的。我还相信，如果您使用 false 调用它或完全省略参数，它将准确地停止在它所在的位置...允许您从当前位置激活输出动画，而无需计算位置。

此外，我不知道这实际上是什么样子，但可能您甚至不需要使用 animate 您可能可以使用内置效果之一，例如 slide code> 或其他东西 - 您可能也想查看这些内容。