JQuery的动画延迟问题
下面是HTML & jQuery代码我有: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个问题
:
当我将鼠标移出#window div时,在调用mouseleave之前有一个小的延迟。我怎样才能让它消失?它有点保持几毫秒,然后注视老鼠叶子。
mouseleave事件有时不会触发......偶尔会发生,但会发生。我必须在#window div上移动我的鼠标并移回(基本上必须执行两次)?任何人都可以让我知道为什么会发生这种情况,我能如何处理?
除了在JQuery中使用animate()之外,还有更好的解决方案吗?对所有/任何建议感到高兴。我正在尝试使用div内的内容执行飞出/幻灯片效果。
非常感谢您的帮助
嗯,我不知道,这将SOVE您所陈述的问题,但也有一些事情是要帮助你的代码的整体。例如,我的第一印象是:
“好吧他使用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
什么效果的一个 - 你可能婉TTO看着那些以及。
对于$(element).stop(true)为+1;我解决了我的问题,虽然我的问题不同:) – Dimskiy 2010-08-05 17:28:36