Hier wurde Jquery innerhalb einer AnimateCC Datei in einem Schlüsselbild am Ende des Tweenings genutzt, um 2 Aufgaben zu erledigen. Das Canvas Element auszublenden und dieses Div- Element einzublenden. Wichtig ist, dass man die JQuery.js Datei einbettet, dann kann man auch innerhalb der Schlüsselbilder JQuery benutzen.
Dieses Div welches oberhalb des Canvas Elements liegt hat die id="bilder" bekommen. Es muss mittels CSS ausgeblendet sein. #bilder{display:none}
Das Javascript im letzten Frame der Zeitleiste sieht so aus:
this.stop();
$( "canvas" ).slideUp( 1200 );
$( "#bilder" ).slideDown( 1200 );
In der slide2.fla im letzten Bild liegt das Script, welches dafür sorgt, dass das Canvas Element verschwindet. Es ist die slideUp Funktion. Diese slideUp kann man durch slideUp() slideDown() fadeOut() fadeIn() ersetzen, man findet sie in meinen Jquery Tipps unter Effekte.
Wollte man nur das Canvas Element ausblenden, würde diese Funktion ausreichen. logo.
$( "canvas" ).slideUp( 1200 );
Das "canvas" in Klammern bezieht sich auf das HTML Element canvas in der HTML Seite, von dem nur eins vorhanden sein sollte. Anderfalls müsste man mittels ID $("#meineID"), oder class $ (" div.meineKlasse") darauf zugreifen.
Das Argument in der Funktion ist die Dauer in Millisekunden slideUp(2000) entspräche 2 Sekunden.
Hier sieht man, die Schreibweise, um mittels Jquery auf eine Id zuzugreifen.
$( "#bilder" ).slideDown( 1200 );
Das Element welches eingeblendet wird muss mittels Style Anweisung in der HTML Datei auf display none gesetzt werden.
Außerdem muss die jquery.js eingebunden werden. Das sieht man in dieser Datei in Zeile 16
<script type="text/javascript" src="jquery.js"></script>
Nachdem man dieses Script eingebunden hat, kann man in der fla auch weitere Änderungen vornehmen, nur sollte man dann unter Datei / Einstellungen für Veröffentlichung die Option "HTML Datei überschreiben" deaktivieren.