Question

我想每60秒执行一次不同的动作来通过动画来改变我的背景。现在点击。

$(document).ready(function(){ 

$("li.one").click( function(){ 
    $('#switch-container').animate({backgroundColor: '#18597f'}, 1000)
});

$("li.two").click( function(){ 
    $('#switch-container').animate({backgroundColor: '#8a0651'}, 1000)
});

$("li.three").click( function(){ 
    $('#switch-container').animate({backgroundColor: '#8a0651'}, 1000)
});

我怎么能这样做？谢谢！

Answer 1

使用setInterval()。

setInterval()方法调用函数或以指定的时间间隔（以毫秒为单位）评估表达式。

setInterval(function(){
  //code for animation
},DURATION);

Answer 2

var colors = ['#18597f','#8a0651','#8a0651'],
    timer  = setInterval(function() {
        var rand = parseInt(Math.random()*(3 - 0),10);
        $('#switch-container').animate({backgroundColor: colors[rand]}, 1000);
    }, 1000);

FIDDLE

编辑：

以常规顺序而不是随机更改颜色：

var colors = ['green','red','yellow'],
    i      = 0,
    timer  = setInterval(function() {
        $('#switch-container').animate({backgroundColor: colors[i++]}, 500);
        i = i==3 ? 0 : i;
    }, 1000);

FIDDLE

Answer 3

$(document).ready(function () {
        //  alert("hello");
        changecolor();
    });
    function changecolor() {
        // alert("hi");
        var colors = ["#00FF00", "#CCCCCC", "#990099", "#FEA400", "#FF9900", "#6600FF", "#333333", ];
        var rand = Math.floor(Math.random() * colors.length);
        $('#controls-wrapper').css("background-color", colors[rand]);
        setTimeout('changecolor()', 100);
    }

如果你不在乎定时器中的代码是否需要比你的间隔更长的时间，请使用setInterval（）：

setInterval(function, delay)

一次又一次地激活作为第一个参数传入的函数。

更好的方法是使用setTimeout和自执行匿名函数：

(function(){
    // do some stuff
    setTimeout(arguments.callee, 60000);
})();

保证在执行代码之前不会进行下一次调用。我在这个例子中使用arguments.callee作为函数引用。这是给函数命名并在setTimeout中调用它的更好方法，因为在ecmascript 5中不推荐使用arguments.callee。

Answer 4

我曾经使用过这个模板：http://luiszuno.com/themes/kroft/ 它有动画背景。查看html文件中的html文件，查看可变时间的slider.js文件以及后端jquery代码的slides文件夹

jquery每60秒执行一次不同的操作

4 个答案: