我对 JS 和 jQuery 很陌生。我已经在上面的链接中手动编写了所有代码。它可以工作并且可以做我希望它保存的事情,但只有一件事。如果您快速单击“下一个”链接,您将看到要显示的下一个容器的闪烁,或者,如果您单击得足够快,代码将显示两个容器,但我只想一次显示一个。有没有办法在 jQuery 中处理这个问题?我尝试过使用此处讨论的停止:How to prevent jquery hover event from fire when not complete? 但这并不能解决问题。
问问题
1362 次
1 回答
2
您正在寻找.stop()
. 它的实现随所需行为而变化,但文档应该为您清除: http: //api.jquery.com/stop
这是一个演示:http: //jsfiddle.net/jmPCt/19/
由于.stop()
工作原理,当您使用它时,.fadeIn()
或者.fadeOut()
您可以将动画切碎到它们不再起作用的程度。我发现的最佳解决方法是始终使用以下方法将动画设置为绝对值.fadeTo()
:http ://api.jquery.com/fadeTo
这是我添加到您的 JSFiddle 中的代码,它用使用and的函数覆盖了默认函数.fadeIn()
和.fadeOut()
jQuery 函数:.fadeTo()
.stop()
$.fn.fadeOut = function (duration, callback) {
$(this).stop().fadeTo(duration, 0, function () {
$(this).css('display', 'none');
if (typeof callback == 'function') {
callback();
}
});
};
$.fn.fadeIn = function (duration, callback) {
$(this).css('display', 'block').stop().fadeTo(duration, 1, function () {
if (typeof callback == 'function') {
callback();
}
});
};
更新
如果您position
为“幻灯片”元素设置属性,那么它们可以相互叠加动画,这将消除您的代码表现出的跳跃性:
HTML --
<div id="controls">
<div id="countah"></div>
<a href="#" id=prev>prev</a> |
<a href="#" id=next>next</a>
</div>
CSS——
.js .staceyPort {
display: none;
position : absolute;
top : 0;
left : 0;
}
#controls{
position : fixed;
bottom : 0;
left : 0;
z-index : 1000;
background : gold;
}
这是一个演示:http: //jsfiddle.net/jmPCt/21/
于 2012-04-11T22:25:42.847 回答