Jquery不保留CSS样式

时间:2014-07-01 19:13:51

标签: javascript jquery html css

n00b这里..

我希望能够保留附加到我正在改变的td的CSS。目前背景是平铺。

脚本:

    $(function () {
        var change1 = $('#change1');
        var backgrounds = [
        'url(http://content.abt.com/media/images/promos/change1abe.jpg)', 
        'url(http://content.abt.com/media/images/promos/change1fish.jpg)',
        'url(http://content.abt.com/media/images/promos/change1abe.jpg)'];
         var current = 0;

function nextBackground() {
    change1.css(
        'background',
    backgrounds[current = ++current % backgrounds.length]);

    setTimeout(nextBackground, 5000);
}
setTimeout(nextBackground, 5000);
change1.css('background', backgrounds[0]);
});

这是我的CSS:

    .tdback{
border:2px solid #fff; 
background-repeat:no-repeat; 
background-position: left top; 
}

我的HTML:

 <td class="tdback" id="change1" height="50%" width="33%">

1 个答案:

答案 0 :(得分:2)

http://jsfiddle.net/silkster/Uwh7V/

每次更改时都需要设置背景重复。

$(function () {
    var change1 = $('#change1');
    var backgrounds = [
        'url(http://content.abt.com/media/images/promos/change1abe.jpg)',
        'url(http://content.abt.com/media/images/promos/change1fish.jpg)',
        'url(http://content.abt.com/media/images/promos/change1abe.jpg)'];
    var current = 0;

    function nextBackground() {
        change1.css({
            'background-image': backgrounds[current = ++current % backgrounds.length],
                'background-repeat': 'no-repeat'
        });

        setTimeout(nextBackground, 5000);
    }
    setTimeout(nextBackground, 5000);
    change1.css({
        'background-image': backgrounds[0],
            'background-repeat': 'no-repeat'
    });
});