JQuery - ändern mehrere Hintergrundbilder

Question

Ich habe einen CSS-Code, der einen Rahmen mit 8 Bilder erzeugt:

background-image: url(images/blue/tl.png), url(images/blue/tr.png), url(images/blue/bl.png), url(images/blue/br.png), url(images/blue/t.png),url(images/blue/b.png),url(images/blue/l.png),url(images/blue/r.png); 
background-position: top left, right top, bottom left, bottom right, top, bottom, left,right; 
background-repeat: no-repeat,no-repeat,no-repeat,no-repeat,repeat-x,repeat-x,repeat-y,repeat-y; 

Mein Ziel ist es, ein JQuery-Programm zu machen, dass die Quellen unterschiedliche Bilder ändern können. Ich habe ein Problem, die Änderung in JQuery für mehrere Hintergrundbilder zu definieren. Ich habe immer nur ein Bild, das sich ändert.

JQuery-Code:

$(document).ready(function() { 
     $("#red").on("click", function(){ 
      $("#outer-frame").css({'background-image': "url(images/red/tl.png)", 'background-image': "url(images/red/tr.png)"}); 
      $("#outer-frame").css({'background-position': "top left", 'background-image': "top right"}); 
     }); 

würde ich wirklich schätzen, wenn jemand, der weiß, wie diese mir helfen würde, zu tun. Vielen Dank für den Rat.

Answer 1

Um mehrere Hintergrundbilder mit Javascript gesetzt, setzen Sie den Stil nur einmal, sondern mit der Folge von mehreren Hintergründen als der Wert, sonst jeder Neueinstellung des Stils überschreibt das vorherige usw.

$("#outer-frame").css({ 
    'background-position' : 'top left', 
    'background-image' : 'url(images/red/tl.png), url(images/red/tr.png)' 
});