由于某种原因,我无法弄清楚如何在以下脚本中停止双动画:
<script type="text/javascript">
$(document).ready(function() {
var activeNews = "01";
$(".newsNav.forward").click(function(event) {
event.preventDefault();
if (activeNews == 01) {
$(".newsItem.01").stop(true, true).fadeOut(250, function() {
$(".newsItem.02").stop(true, true).fadeIn(250);
});
activeNews = 02;
} else if (activeNews == 02) {
$(".newsItem.02").stop(true, true).fadeOut(250, function() {
$(".newsItem.03").stop(true, true).fadeIn(250);
});
activeNews = 03;
} else if (activeNews == 03) {
$(".newsItem.03").stop(true, true).fadeOut(250, function() {
$(".newsItem.01").stop(true, true).fadeIn(250);
});
activeNews = 01;
}
});
});
</script>
当您过快地点击 .newsNav.forward
时,会出现多个 .newsItems
,而不是仅一个。正如您所看到的,我知道 .stop();
应该可以解决这个问题,但我不明白为什么它不起作用。
HTML(如果相关):
<div id="news">
<a class="newsNav back" href="#"><</a>
<a class="newsNav forward" href="#">></a>
<h1>Latest News</h1>
<div id="newsSlider">
<p class="newsItem 01 active">First News Item</p>
<p class="newsItem 02">Second News Item</p>
<p class="newsItem 03">Third News Item</p>
</div><!--/#newsSlider-->
<div style="clear:both;"></div>
</div><!--/#news-->
相关 CSS 以及:
#contentWrapper #content #news #newsSlider p.newsItem {
display: none;
}
#contentWrapper #content #news #newsSlider p.newsItem.active {
display: block;
}
最佳答案
您只是停止某些类的动画。要实现动画的“全局”停止,您必须清除可能在 JS 函数中进行动画处理的所有元素的动画队列。
这意味着要做一些事情:
$(document).ready(function() {
var activeNews = "01";
$(".newsNav.forward").click(function(event) {
event.preventDefault();
// Pre-emptively stops all animation
$(".newsItem").stop(true, true);
// Note the removal of the .stop() method before each animation
if (activeNews == 01) {
$(".newsItem.01").fadeOut(250, function() {
$(".newsItem.02").fadeIn(250);
});
activeNews = 02;
} else if (activeNews == 02) {
$(".newsItem.02").fadeOut(250, function() {
$(".newsItem.03").fadeIn(250);
});
activeNews = 03;
} else if (activeNews == 03) {
$(".newsItem.03").fadeOut(250, function() {
$(".newsItem.01").fadeIn(250);
});
activeNews = 01;
}
});
});
关于javascript - 双动画,.stop() 没有修复它,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15279918/