每5秒重播一次jQuery函数

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中使用下划线。

我认为这与我使用“find（）”有关，一旦DOM已经加载并且函数被设置，是为了遍历DOM树而不是down？

编辑：

更新的代码，仍然无法正常工作。

HTML：

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

Answer 1

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

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

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

3）可以提供启动和停止动画的一些灵活性。如果我们使用（2）中提到的自定义对象，那么可以很容易地添加它。

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

5）最后在我的示例中，我提供了一些额外的“填充HTML”，以便该示例在运行时看起来很好。在jQuery中褪色实际上会将褪色的项目设置为“none”的CSS显示，导致该演示中的内容“跳来跳去”，所以我使用了一些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处看到一个有效的示例 - 尽管stop/start按钮无效（大概是JSFiddle特有的），但它们在上下文中仍然有效。

Answer 2

这里我也会只需更换您的$（本）。也许它会工作然后..也使用回调。

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