Question

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

我想将id：team的背景颜色变为蓝色但是我只想将它变成这种颜色4秒钟。

我该怎么做？

我已经用Google搜索了但是在给定的时间范围内我找不到任何关于更改css的内容。

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

Answer 1

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

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

您需要.animate()的jQuery UI，否则您只能使用.css()。

Answer 2

您必须使用计时器功能：

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

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

没有内置的能力可以说“回到之前的状态”;你必须记住自己代码中的旧值。

Answer 3

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

请参阅the following code working in a 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);
});

在一段时间内更改Div的CSS

3 个答案: