0

我想每 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)
});

我怎么能这样做？谢谢！

4

4 回答 4

2

使用setInterval().

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

setInterval(function(){
  //code for animation
},DURATION);
于 2013-03-20T08:08:11.353 回答
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);

小提琴

编辑：

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

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

小提琴

于 2013-03-20T08:12:24.173 回答
1 
$(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 内调用它的更好方法，因为 arguments.callee 在 ecmascript 5 中已被弃用。

于 2013-03-20T08:11:48.827 回答
0

我曾经使用过这个模板：http: //luiszuno.com/themes/kroft/ 它有一个动画背景。检查 html 文件中的 html、slider.js 文件中的变量时间和幻灯片文件夹中的后端 jquery 代码

于 2013-03-20T08:11:28.233 回答