jQuery Animation + ghostType Plugin

[nookie]

Hallo,

ich habe eine kleine Herausforderung (Problem). Ich habe einen Text der mit dem ghostType Plugin "geschrieben" wird. Nach bestätigung eines Buttons / Links, soll dieser Text ausgeblendet werden, der Inhalt ersetzt und wieder eingeblendet werden. Das ganze soll öfters geschehen. Nun ist mein Problem, das ich zwischen den einzelnen Animationen keine richtigen Wartezeiten habe, so dass die Animationen so schnell verlaufen das ich im Endeffekt nur den letzten Text sehe.

<h2 class="brand">Test</h2>
<a class="btn-start">Start</a>

$(document).ready(function() {
        $(".brand").ghostType();

        $(".btn-start").click(function() {
                $(".brand").animate({opacity: 0.0}, 2000);
                $(".brand").html("Test1");
                $(".brand").ghostType();

                $(".brand").animate({opacity: 0.0}, 2000);
                $(".brand").html("Test2");
                $(".brand").ghostType();

                // und so weiter....
        });
    });

Nun habe ich schon die Funktion "setTimeout" gefunden, doch ist das nicht wirklich dass was ich suche.. oder ich bin einfach grad zu dusselig dafür. Bitte um Hilfe!

 

[Sempervivum]

Du musst die einzelnen Aufrufe verketten, anstatt sie untereinander zu schreiben:

        $(".btn-start").click(function() {
                $(".brand").animate({opacity: 0.0}, 2000). $(".brand").html("Test1")
                .$(".brand").ghostType().(".brand").animate({opacity: 0.0}, 2000) // usw

Außerdem kannst Du mit der jQuery-Funktion delay() eine Verzögerung erreichen, wenn Du diese ebenfalls in die Kette einbaust.

 

[nookie]

Also wenn ich das so mache, blendet er mir den Text zwar aus aber weiter auch nicht. Also es passiert nich außer das er die opacity auf 0.0 setzt.
Ich dachte erst das es vllt daran liegt das die opacity auf 0.0 ist aber das ist nicht das Problem.

 

[Sempervivum]

Ich sehe auch nirgends, dass die Opacity wieder hochgesetzt wird. So ist doch nach der ersten Animation der Text gar nicht sichtbar.
Leider ist mir noch ein Fehler unterlaufen. So ist es richtig:

        $(".btn-start").click(function() {
                $(".brand").animate({opacity: 0.0}, 2000).html("Test1")
                .ghostType().animate({opacity: 0.0}, 2000) // usw

Leider kenne ich dieses Ghosttype-Plugin nicht. Du schreibst, dass es einen Text ermittelt. Wo wird dieser denn abgelegt?
Am besten postest Du mal die URL deiner Seite oder baust ein JS-Fiddle.

 

[nookie]

Jetzt klappt es auch. :)

Edit: Naja noch immer nicht ganz. Ich sehe immer nur noch den Text der als letztes gesetzt wird. Der Text wird nirgendwo abgelegt, außer wie oben zusehen ist im h2. Jetzt mal abgesehen vom Ghostplugin, soll der Text eingeblendet werden, ausgeblendet und geändert werden. Dann das ganze paar mal wiederholen.

Habe keine URL da dass ganze lokal ist und nen JS-Fiddle ist unnötig für die paar Codeschnipsel die ich oben gepostet habe. Danke dir trotzdem!

 

[Tronjer]

Ghosttype kenne ich auch nicht, hatte aber neulich ein ähnliches Problem, wo eine Animation mehrfach werden sollte. Im Endeffekt habe ich dann eine Chain mit den Funktionen animate(), stop() und queue() gebaut. Nicht besonders elegant, funktioniert aber.

Bei Eingabe der Suchwörter leitet Google dich zu einer Lösung auf stackoverflow.