0

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

我在 home.php 文件中有一个幻灯片。我有一个菜单栏。当我在菜单中单击主页时，我将 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>

如果您需要详细信息，请告诉我。

问题 他们单独工作完美。当我多次单击菜单栏上的主页时，淡入时间不是恒定的。一些图像加载速度更快，另一些则更慢。

4

1 回答 1

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，这也会将动画添加到队列中，因此清除间隔可能会有所帮助：

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);
于 2013-07-14T08:10:40.773 回答