Question

我正在使用jQuery创建一个简单的幻灯片。

我在home.php文件中有一个幻灯片。我有一个菜单栏。当我在菜单中单击home时，我将home.php加载到主页的内容div中。幻灯片放映和菜单都没有问题。合并后，它们在首次加载时工作正常。然而，当多次加载时，时间间隔不完美，并且与不相等的不规则负载模式一起工作。这是我在home.php中的代码

<script>
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});
</script>

并在menu.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>

如果您需要详细信息，请与我们联系。

问题它们单独工作完美。当我在菜单栏上点击几次回家时，淡入时间不是恒定的。有些图像加载速度较快，有些图像加载较慢。

Answer 1

延迟动画执行的原因可能是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，它也会为队列添加动画，所以清除intervall会有所帮助：

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);

加载图像时间不一致（jQuery / PHP / HTML）

1 个答案: