2 
$("#team").css("background-color","blue");

我想把 id:team 的背景颜色变成蓝色，但是我只想把它变成这种颜色 4 秒。

我该怎么做呢？

我已经用谷歌搜索了，但我找不到任何关于在给定时间范围内更改 css 的信息。

此外，从以前的设置淡出/淡入/淡入将是一个不错的选择。

4

3 回答 3

6

如果您希望它仅显示为蓝色 4 秒，您可以执行以下操作：

var element = $( "#team" );
var oldColor = element.css( "background-color" );
element.animate( { "background-color": "blue" } )
       .delay( 4000 )
       .animate( { "background-color": oldColor } );

你需要 jQuery UI .animate()，否则你可以只使用.css().

于 2012-12-31T22:15:42.030 回答
2

您必须使用计时器功能：

setTimeout(function() { 
     $('#team').css('background-color', 'whatever'); 
}, 4000);

第二个参数是在调用第一个参数（函数）之前您希望等待多长时间的毫秒数。

没有内置的能力说“回到以前的样子”；您必须记住自己代码中的旧值。

于 2012-12-31T22:11:27.700 回答
0

如果您不想使用 jQuery UI 插件（可能是因为它的大小），那么您可以手动制作动画。

请参阅以下在 jsFiddle 中工作的代码。

function animblue(selector, from, to, step) {
    var
        target = $('#target'),
        color = from,
        next;
    next = function () {
        var hex = (Math.floor(color) < 16 ? '0' : '') + Math.floor(color).toString(16);
        target.css('background-color', '#' + hex + hex + 'ff');
        color += step;
        if (!((color < from && color < to) || (color > from && color > to))) {
            setTimeout(next, 10);
        }
    };
    next();
}

$('#action').on('click', function () {
    animblue('#target', 255, 0, -255 / 16);
    window.setTimeout(function () {
        animblue('#target', 0, 255, 255 / 16);
    }, 4000);
});​
于 2012-12-31T23:22:10.760 回答