Ändern der Div-ID in jQuery ⇐ CSS

[Anonymous]

Ich bin bereits zurück und Google-Fu hat mir nichts gebracht.

Ich versuche eine Art Bildergalerie zu erstellen und muss die Divs auf meinem Schieberegler dynamisch zurücksetzen, aber ich habe kein Glück. Hier ist der Vorgang:

• Klicken Sie auf „Links“
• Linkes Div bewegt sich vorwärts.
• Zentrale Divs-ID wird „links“ genannt und umgekehrt (unter Verwendung einer temporären ID, um zu verhindern, dass zwei Divs dieselbe ID haben)
• Das CSS wird zurückgesetzt, als ob es nie passiert wäre, außer dass das Bild anders wäre.

Mein Problem ist, dass sie scheinbar vollständig auf ihren ursprünglichen Zustand zurückgesetzt werden, als ob die ID-Änderung nie stattgefunden hätte. Irgendwelche Ideen?

Hier ist die JSFiddle

und hier ist der fehlerhafte Code:

Code: Select all

    $('.navigationLeft').click(function() {
console.log("yay");
$( '#left' ).animate({
marginLeft: selWidth
}, 500, "linear",  function() {
// Animation complete.
$( '#center' ).attr('id', 'temp');
$( '#left' ).attr('id', 'center');
$( '#center' ).attr('id', 'left');
$( '#left' ).css('width', '900px');
$( '#left' ).css('height', '400px');
$( '#left' ).css('overflow', 'hidden');
$( '#left' ).css('position', 'relative');
$( '#left' ).css('left:', '-900px');
$( '#left' ).css('overflow', 'hidden');
$( '#left' ).css('z-index', '2');
$( '#center' ).css('width', '900');
$( '#center' ).css('height', '400');
$( '#center' ).css('position', 'absolute');
$( '#center' ).css('overflow', 'hidden');
$( '#center' ).css('z-index', '1');
});
//reset positions and change images
});