JQuery动画延迟问题

下面是我的HTML和JQuery代码：

我有：

<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>

我目前有两个问题：

当我将鼠标移离#window div时，在调用mouseleave之前会有一个小的延迟。我怎样才能让它消失？它会停留几毫秒，然后才会刮胡子

mouseleave事件有时不会触发。。。偶尔会发生，但也会发生。我必须在#window div上移动鼠标并向后移动（基本上必须做两次）？有人能告诉我为什么会发生这种情况以及我如何处理吗

除了在JQuery中使用animate（）之外，还有更好的解决方案吗？我很乐意接受所有/任何建议。我正在尝试使用div中的内容来实现弹出/滑动效果

---

非常感谢您的帮助

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

“好的，他在使用jquery…等等，我以为他在使用jquery…WTF？”

为什么要使用

getElementById

？使用

$（'#myid'）

为什么要使用

样式.可见性

？使用

$（选择器）.css（'visibility'，value）

不要使用元素属性绑定事件。。。使用jquery

$（选择器）

好的，别挡道，当鼠标发射失败时，你确定鼠标离开了该区域吗？我是说你确定div的尺寸比你想象的大一点吗？如果情况并非如此，则可能是执行函数所需的时间很简单，也可能是没有完成动画制作（即，

isDone=false

）。在我看来，与其试着去检测是否有事情做了动画，我宁愿调用

$（element）

在动画的端点处停止动画，然后继续其他动画。这应该是非常安全的。另外，我相信如果你用

false

来调用它，或者完全忽略参数，它将在它所在的位置停止它。。。允许您从当前位置激活输出动画，而无需计算位置

此外，我不知道这实际上是什么样子，但可能是你甚至不需要使用

动画

你可以使用一种内置效果，如

幻灯片

或其他东西-你可能也想看看这些效果。

+1美元（元素）。停止（true）；我的问题解决了，尽管我的问题不同：）

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