1

以下是我拥有的 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 之前会有一小段延迟。我怎样才能让它消失？在导致鼠标离开之前，它会停留几毫秒。

  2. mouseleave 事件有时不会触发……偶尔会发生，但确实会发生。我必须在#window div 上移动鼠标并向后移动（基本上必须执行两次）？谁能让我知道为什么会发生这种情况以及我该如何处理？

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

非常感谢您的帮助

4

1 回答 1

3

好吧，我不知道这会解决你所说的问题，但是有很多事情会帮助你的代码。例如，我的第一印象是：

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

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

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

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

于 2010-02-12T21:16:57.173 回答