我正在使用jQuery创建一个简单的幻灯片放映。
我在home.php文件中有一个幻灯片。我有一个菜单栏。当我点击菜单中的主页时，我会在主页的contentdiv中加载home.php。幻灯片放映和菜单都没有问题。当组合在一起时，它们在第一次加载时工作良好。然而，当多次加载时，时间间隔并不完美，并且以不等的非均匀加载模式工作。这是我在home.php 中的代码
<script>
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});
</script>
和在菜单中。php
<li><a href=# onclick="$('#content').load('home.php') ;return false">HOME</a></li>
<li><a href=# onclick="$('#content').load('buyitems.php') ;return false">BUY</a></li>
<li><a href=# onclick="$('#content').load('discuss.php') ;return false">DISCUSS</a></li>
<li><a href=# onclick="$('#content').load('locationnear.php') ;return false">NEAR YOU</a></li>
如果你需要详细信息，请告诉我。
问题他们各自完美地工作。当我多次点击菜单栏上的主页时，淡入时间并不是恒定的。有些图像加载得更快，有些则加载得更慢。
延迟动画执行的原因可能是jQuery动画队列。
像fadeOut这样的新动画会排队等待同一元素上的先前动画完成。
要取消当前队列，您可以使用jQuery.stop()stop-jQuery API
描述：停止匹配元素上当前正在运行的动画。
所以在你的情况下，这可能看起来像这样：
$('.fadein :first-child').stop(true, true).fadeOut()
或者禁用此动画的队列fadeOut-jQuery API
指示是否将动画放置在效果队列中的布尔值。如果为false，动画将立即开始。
$('.fadein :first-child').fadeOut({ queue : false })
编辑
每次单击代码时，都会启动一个新的setInterval，它也会向队列中添加动画，因此清除间隔可能会有所帮助：
if (window.currenTimer) {
clearInterval(window.currentTimer);
}
window.currentTimer = setInterval(function(){
$('.fadein :first-child')
.stop(true, true)
.fadeOut()
.next('img')
.stop(true, true)
.fadeIn()
.end()
.appendTo('.fadein');
}, 3000);