Question

以下是HTML＆amp;我有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';
    }
}

我目前遇到两个问题：

当我离开#window div时，有一个小的延迟，在此之前调用mouseleave。我怎么能让它消失？在注意mouseleave之前，它会保持几毫秒。
mouseleave事件有时不会触发...偶尔会发生，但它会发生。我必须在#window div上移动我的鼠标并向后移动（基本上必须做两次）？任何人都可以让我知道为什么会这样，以及我如何处理？

除了在JQuery中使用animate（）之外，还有更好的解决方案吗？会对所有/任何建议感到高兴。我正在尝试使用div内的内容进行飞出/滑动效果。

非常感谢您的帮助

Answer 1

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

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

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

好的，当你的鼠标离开时，你是否确定鼠标离开了该区域？我的意思是你确定div的尺寸比你想象的要大吗？如果不是这样的话，它可能很简单就是执行函数所需的时间，也可能是它没有完成动画（即isDone = false）。在我看来，不是试图检测某些事情是否完成了动画，我会调用$(element).stop(true);来停止其端点处的动画，然后继续使用其他动画。这应该是非常安全的。另外我相信如果你用false来调用它或者完全省略这个参数它将会完全停止它...允许你从当前位置激活你的动画而不必计算位置。

此外我不知道这实际上是什么样的，但可能你甚至不需要使用animate你可以使用其中一种内置效果，如slide或其他东西 - 你也许不想去看那些人。

JQuery动画延迟问题

1 个答案: