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之前有一个小的延迟。我怎样才能让它消失？它有点保持几毫秒，然后注视老鼠叶子。

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

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

非常感谢您的帮助

Answer 1

嗯，我不知道，这将SOVE您所陈述的问题，但也有一些事情是要帮助你的代码的整体。例如，我的第一印象是：

“好吧他使用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什么效果的一个 - 你可能婉TTO看着那些以及。