Изменить фоновое изображение с помощью jQuery addClass

Можно ли изменить фон css с помощью jQuery addClass? Я использую следующий код, но он просто остается на исходном фоновом изображении.Изменить фоновое изображение с помощью jQuery addClass

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); 
}

источник

2016-02-08 Isak Combrinck

Поскольку вы удаляете класс сразу после его добавления, вы не увидите эффект; браузер не перерисовывает экран до тех пор, пока в этом случае не будет абсолютно необходимо. Вероятно, вам следует исследовать 'setInterval()' или 'setTimeout()', если вы хотите циклически перебирать фоны с течением времени. – Pointy

^, и 'delay()' ничего не делает при смене классов, это предназначено для анимаций – adeneo

У вас есть две проблемы. Во-первых, вы добавляете классы и мгновенно удаляете их, так как 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, но принцип тот же.

источник

2016-02-08 15:15:08

Спасибо, это работает хорошо! –

Вы должны написать соответствующие CSS-правила. Теперь их приоритет не позволяет вам видеть изменения. Напишите здесь

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

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

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

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

источник

2016-02-08 15:11:56 MysterX

Я вижу, что вы получаете, но предложение может быть улучшено. Вместо того, чтобы даже устанавливать изображение с помощью '# background', создайте еще один класс' .background '. Таким образом, вы не объединяете селекторов и должны использовать только один класс для переопределения. – hungerstar

Как говорили другие, это потому, что идентификаторы всегда имеют higher specificity than classes.

Хотя вы можете сделать то, что предлагают другие ответы (# background.background1 и т. Д.), Я бы рекомендовал использовать ID только для таргетинга jQuery и избегать использования идентификаторов в ваших CSS-файлах, поскольку он не имеет преимущество перед использованием класса, и у него много недостатков (без повторного использования, проблем специфичности ...). См. why you should avoid IDs in yous CSS files

источник

2016-02-08 15:24:48 pincfloit

Изменить фоновое изображение с помощью jQuery addClass

ответ

Смежные вопросы