Jquery Not Retaining CSS Styles

Question

n00b here..

I want to be able to retain the CSS attached to the td that I'm changing. Currently the background is tiling.

Script:

    $(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]);
});

Here is my CSS:

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

And my HTML:

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

Set the background-image with the css function rather than the background should keep the other background styles e.g. change1.css ('background-image', backgrounds[..etc..]. — gratz
– gratz, Commented Jul 1, 2014 at 19:20

Silkster · Accepted Answer · 2014-07-01 19:25:31Z

2

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

You need to set background-repeat each time it changes.

$(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'
    });
});

answered Jul 1, 2014 at 19:25

Silkster

2,22016 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Silkster Over a year ago

alternatively, you could set "background" to "transparent url('" + backgrounds[current = ++current % backgrounds.length] + "') no-repeat left top"

Collectives™ on Stack Overflow

Jquery Not Retaining CSS Styles

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related