Animation: Farbe übergeben

[Sylnois]

Hallo Leute,

Ich versuche gerade eine kleine Animation mit jQuery zu erstellen. Das sliden klappt schon ganz gut, nur gefällt mir eines nicht.
Ich weiss nicht wie ich die Farbe am besten "übergeben" kann, damit es "schön" aussieht. Am besten ihr schaut es euch selber an:
SKyDrops

Klickt einfach auf das Element und schaut zu. Wenn ich bei meiner Funktion einfach den background ändere, dann sieht es beschis* aus.
Vielleicht hat einer einen Tipp :) ?

Gruss
Sylnois

Edit: Link geändert!

 

[Timmer]

Entweder du nutzt die jQuery Color Lib und "fadest" die Hintergrundfarbe rein/raus oder du erzeugst ein Element mit der orangenen Farbe, welches hinter den Texten liegt. Beim Klicken auf ein Element passt du in einer Animation die Position und Breite dieses Elements an das ausgewählte an. Et voilà, schon hast du ne fette Animation, die gut was her macht ;D

 

[Sylnois]

Heyho,

Danke für deine Antwort. Ich versuche gerade etwas anderes aus Eines gefällt mir noch nicht. Das aktuelle Element wird schön animiert, das "neue" Element kommt aber ganz komisch rüber.

function checkStep(a){    var n = $("#steps > div:visible").attr("id");
    if(a){
        var c = parseInt(n[n.length-1]) + 1;
    } else{
        var c = parseInt(n[n.length-1]) - 1;
    }
    $('#' + n).fadeOut(function(e){
    
        $("#n" + n + " span").animate({width:'toggle'},600, function(e){
            $("#n" + n).css("background", "grey");
            $("#nstep" + c).css("background", "orange");
            $("#nstep" + c + " span").animate({width:'toggle'},600);
        });
        $('#step' + c).fadeIn("slow");
    });
    
    return(n[n.length-1]);
}

Any ideas?

Cheers

Edit: Link geändert!

 

[Timmer]

Ähm, rein am Code kann ich nicht viel sagen, ich weiß bloß, dass du anscheinend gerade daran arbeitest und ich deswegen nicht sehen kann, was gemeint ist (weil grad garnix funktioniert) ;)

 

[Sylnois]

Habe den Link geändert :mrgreen:
Probiers jetzt nochmal(Einfach auf "Weiter" oder "Zurück" klicken).
Klick

Edit: Habe noch was herausgefunde, was ich überhaupt nicht verstehe.. Klickt mal auf "Weiter", dann auf "Zurück".. Siehe da, die Animation klappt so wie ichs haben möchte.

PS: Wenn man danach auf "Weiter" klickt, dann klappts auch.

 

[Timmer]

Du meinst, dass während der Animation die Zahl nach unten rutscht? Und manchmal kommt der nächste Step ohne Animation...

Ich schau mal, was sich machen lässt ^^

 

[Sylnois]

Du benutzt wohl Firefox? Ich benutze eben Google Chrome. Aber stimmt, bei Firefox rutscht die Zahl nach unten.
Ja genau, der nachfolgende Step kommt ohne Animation. Je nach Lust und Laune

 

[Timmer]

Irgendwas ist da grundsätzlich faul am Aufbau, denn Tabs, die schonmal offen waren, funktionieren. Wenn ich versuche, das zu rekonstruieren, kommt aber irgendwie nur Müll bei raus

 

[Sylnois]

Was ist denn genau falsch dran? :)
Ich habe die Steps in span's eingepackt und alle bis auf den ersten gehiddet.
Wenn man nun auf Weiter klickt, wird der erste Step gehiddet und der nächste gezeigt mittels der Animation.

 

[Timmer]

Ne, das mein ich damit nicht xD

Aber das Hidden könnte genau das Problem sein. Denn wenn du zurück und nochmal weiter klickst, funktioniert die Animation. Ich schaus mir gleich nochmal an, hatte bis vorhin nix brauchbares gefunden. Bin heute auch schon bissel durchn Wind ;)

 

[Sylnois]

Falls du einen Weg bereits gefunden hast, scheue dich nicht ihn zu präsentieren.
Ich werde erst ab morgen wieder daran "arbeiten".