javascript - 使用 jQuery addClass 更改背景图像

Question

是否可以使用 jQuery addClass 更改 css 背景？我正在使用以下代码，但它只停留在初始背景图像上。

HTML

<div id="background">
</div>

jQuery

$(document).ready(function() {
                for (var x = 10; x > 0; x--) {
                    $"#background").addClass(background2).delay(2000);
                    $("#background").removeClass("background2");
                    $("#background").addClass("background3").delay(2000);
                    $("#background").removeClass("background3").delay(2000);
                };
            });;

CSS

#background {
    width: 100%;
    height: 100%;
    font-size: 1.5em;
    background-image: url(backgroundimage1.JPG);
    background-position: left;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: scroll;
}

.background1 {
    background-image: url(backgroundimage1.JPG);
}

.background2 {
    background-image: url(backgroundimage2.JPG);
}

.background3 {
    background-image: url(backgroundimage3.JPG);
}

Answer 1

这里有两个问题。首先，您要添加类并立即删除它们，因为 delay 对 css() 方法没有影响。要实现您的要求，您可以改用 setInterval。其次，您需要增加 backgroundX 类的特异性，以便它们覆盖 #background 元素上的默认样式。试试这个:

var count = 0;
var classes = [ 'background1', 'background2', 'background3' ];

function updateBackground() {
    $('#background').removeClass(classes.join(' ')).addClass(classes[count % classes.length]);
    count++;
}

setInterval(updateBackground, 2000);

#background.background1 {
    background-image: url(backgroundimage1.JPG);
}

#background.background2 {
    background-image: url(backgroundimage2.JPG);
}

#background.background3 {
    height: 20%;
    background-image: url(backgroundimage3.JPG);
}

Working example

请注意，该示例使用的是 background-color，但原理是相同的。