JQuery动画延迟问题

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

我目前有2个问题：

1. 当我将鼠标从#window div上移开时，在调用mouseleave之前有一个小的延迟。我该如何消除？留出几毫秒的时间，然后再告诫mouseleave。

2. mouseleave事件有时不会触发...偶尔发生，但是会发生。我必须在#window div上移动鼠标并向后移动（本质上必须做两次）？任何人都可以让我知道为什么会发生这种情况以及如何处理吗？

除了在JQuery中使用animate（）之外，还有其他更好的解决方案吗？愿意接受所有/任何建议。我正在尝试对div内的内容进行弹出/ slideIn效果。

非常感谢您的帮助

Answer 1

好吧，我不知道这会解决您陈述的问题，但是有很多事情可以整体上帮助您的代码。例如，我的第一印象是：

“好吧，他正在使用jquery ...等等，我以为他在使用jquery ... WTF？”。

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

好吧，当鼠标离开失败时，您确定鼠标离开该区域了吗？我的意思是您确定div的尺寸比您想象的大吗？如果不是这种情况，则可能只是执行该功能所花费的时间，也可能不是动画完成（即isDone = false）。在我看来，不是尝试检测动画是否完成某事，而是将调用$(element).stop(true);停止动画在其终结点，然后继续执行其他动画。那应该是很安全的。我也相信，如果您使用false调用它或完全省略该参数，它将完全停止它的位置...允许您从当前位置激活动画，而无需计算位置。

另外，我不知道它实际上是什么样子，但是可能甚至不需要使用animate，您也许可以使用内置的效果之一，例如slide或类似的东西-您可能想看看对于那些。