Question

我想每5秒重播一次我的jquery函数ChangeStats（），它现在正在做什么。

function ChangeStats() {

    $('body').find('.admin-stats-big-figures-hidden').fadeIn(500);

setTimeout(function() {
    $('body').find('.admin-stats-big-figures').fadeOut(500);
}, 500);

}

$(document).ready(function(){
    setInterval(ChangeStats, 5000);
})();

是的，我有正确的班级名称。不，我没有在我的HTML中使用下划线。

我认为这与我使用＆＃34; find（）＆＃34;有关，一旦DOM加载并且设置了函数，它意味着遍历DOM树而不是下来？

编辑：

更新了代码，仍然无效。

HTML：

<span class="admin-stats-big-figures">%productCount%</span>
<span class="admin-stats-big-figures-hidden">hey</span>

Answer 1

这里我要替换你的$（这个）。也许它会工作然后..也使用回调。

 function ChangeStats() {

  $('body').find('.admin-stats-big-figures-hidden').fadeIn(500, function() {
    $('body').find('.admin-stats-big-figures').fadeOut(500);
  });

 }

$(document).ready(function(){
     setTimeout('ChangeStats()', 5000);
});

Answer 2

好的，我将在这里做出一些假设并做出几个假设;一个是你希望重复在两个元素之间循环，另一个是你在窗口的上下文中使用$（this）而不是包含元素。如果其中任何一个不正确，则以下解决方案可能不合适。但是，让我们试一试，嗯？

1）您需要使用setInterval而不是setTimeout来创建重复调用。你当然可以＆＃34;链＆＃34;你的超时（即：从当前超时的代码调用后续超时）。这在某些情况下有一些好处，但是现在让我们假设您将使用间隔而不是超时。

2）你每次都调用find（）jQuery方法，这有点不必要，特别是如果你要重复这些动作，那么一个想法就是缓存查找。如果你打算这样做，自定义对象比单独的全局变量更合适。

3）可以提供启动和停止动画方面的一些灵活性。如果我们使用（2）中提到的自定义对象，则可以轻松添加。

4）你正在使用fadeIn和fadeOut，但是如果你希望这些项目循环，那么fadeToggle可能是你最好的解决方案，因为它只是让你做到这一点，切换，而不需要检查当前的不透明状态元件。

5）最后在我的例子中，我提供了一些额外的＆＃34;填充HTML＆＃34;为了使示例在运行时看起来很好。淡入jQuery实际上会将淡化项设置为＆＃34; none＆＃34;的CSS显示。这导致内容＆＃34;跳跃＆＃34;在这个演示中，所以我使用了一些div和几个HTML实体空间来保持格式化。

好的，毕竟这是代码..

// your custom animation object
var myAnim = {
  // these will be cached variables used in the animation
  elements : null,
  interval : null,
  // default values for fading and anim delays are set to allow them to be optional
  delay : { fade: 500, anim: 200 },
  // call the init() function in order to set the variables and trigger the animation
  init : function(classNameOne, classNameTwo, fadeDelay, animDelay) {
    this.elements = [$("."+classNameOne),$("."+classNameTwo)];
    // if no fade and animation delays are provided (or if they are 0) the default ones are used
    if (animDelay) this.delay.anim = animDelay;
    if (fadeDelay) this.delay.fade= fadeDelay;
    this.elements[0].fadeOut(function(){myAnim.start()});
  },
  // this is where the actual toggling happens, it uses the fadeToggle callback function to fade in/out one element once the previous fade has completed
  update : function() {
    this.elements[0].fadeToggle(this.delay.anim,function(el,delay){el.fadeToggle(delay)}(this.elements[1],this.delay.anim));
  },
  // the start() method allows you to (re)start the animation
  start : function() {
    if (this.interval) return; // do nothing if the animation is currently running
    this.interval = setInterval(function(){myAnim.update()},this.delay.fade);
  },
  // and as you would expect the stop() stops it.
  stop : function () {
    if (!this.interval) return; // do nothing if the animation had already stopped
    clearInterval(this.interval);
    this.interval = null;
  }
}

// this is the jQuery hook in order to run the animation the moment the document is ready
$(document).ready(
  function(){
    // the first two parameters are the two classnames of the elements
    // the last two parameters are the delay between the animation repeating and the time taken for each animation (fade) to happen. The first one should always be bigger
    myAnim.init("admin-stats-big-figures","admin-stats-big-figures-hidden",500,200);
  }
);

好的，现在我们需要HTML来补充这一点（正如我所说，我添加了一些格式化）：

<div><span class="admin-stats-big-figures">One</span> &nbsp; </div>
<div><span class="admin-stats-big-figures-hidden">Two</span> &nbsp; </div>
<hr/>
<input type="button" value="Start" onclick="myAnim.start()"/> | <input type="button" value="Stop" onclick="myAnim.stop()"/>

我还提供了停止/启动动画的按钮。你可以在这个JSFiddle看到一个工作示例 - 虽然停止/启动按钮不起作用（可能是JSFiddle特有的），但它们在上下文中确实有用。

每5秒重播一次jQuery函数

2 个答案: