kostenloser Webspace werbefrei: lima-city

Animiertes Dropdown mit Javascript

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   moneyprojekt

   moneyprojekt hat kostenlosen Webspace.

   21:56, 12.6.2012

   Hey,
   ich hab ein Dropdown Menü mit JS gemacht, und wenn man auf den Button klickt, erscheint ein Text, wenn man nochmal drückt, verschwindet er. Ich würde ihn gerne Animieren, dass er z.B. langsam runter fährt, und das ohne jQuery oder andere Hilfen. Und wenn es geöffnet ist einen anderen Text, z.B. Opfen und Close.

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. ploco

   

   ploco hat kostenlosen Webspace.

   18:12, 13.6.2012

   moneyprojekt schrieb:
   [...] ich hab ein Dropdown Menü mit JS gemacht, und wenn man auf den Button klickt, erscheint ein Text, wenn man nochmal drückt, verschwindet er. Ich würde ihn gerne Animieren, dass er z.B. langsam runter fährt, und das ohne jQuery oder andere Hilfen. Und wenn es geöffnet ist einen anderen Text, z.B. Opfen und Close.

   Auch wenn ich es nicht nachvollziehen kann, warum du auf das wundervolle jQuery verzichten möchtest, möchte ich dich auf folgendes Tutorial verweisen.
   Grundsätzlich musst du auf Timer zurückgreifen, um das Objekt alle paar Millisekunden zu verschieben und somit eine Animation zu erzeugen. Nach Vollendung der Animation (oder noch während dieser) kannst du den Text/ den Inhalt des HTML-Elements überschreiben.
4. Autor dieses Themas

   moneyprojekt

   moneyprojekt hat kostenlosen Webspace.

   18:23, 13.6.2012

   ploco schrieb:
   

   moneyprojekt schrieb:
   [...] ich hab ein Dropdown Menü mit JS gemacht, und wenn man auf den Button klickt, erscheint ein Text, wenn man nochmal drückt, verschwindet er. Ich würde ihn gerne Animieren, dass er z.B. langsam runter fährt, und das ohne jQuery oder andere Hilfen. Und wenn es geöffnet ist einen anderen Text, z.B. Opfen und Close.

   Auch wenn ich es nicht nachvollziehen kann, warum du auf das wundervolle jQuery verzichten möchtest, möchte ich dich auf folgendes Tutorial verweisen.
   Grundsätzlich musst du auf Timer zurückgreifen, um das Objekt alle paar Millisekunden zu verschieben und somit eine Animation zu erzeugen. Nach Vollendung der Animation (oder noch während dieser) kannst du den Text/ den Inhalt des HTML-Elements überschreiben.

   
   
   Danke für das Tut, les es mir gleich durch. D.h ich positioniere das Objekt einfach so lange neu, bis es an der gewünschten Stelle ist, und es so aussieht, als ob es verschoben wird?

5. ploco

   

   ploco hat kostenlosen Webspace.

   18:37, 13.6.2012

   moneyprojekt schrieb:
   Danke für das Tut, les es mir gleich durch. D.h ich positioniere das Objekt einfach so lange neu, bis es an der gewünschten Stelle ist, und es so aussieht, als ob es verschoben wird?

   Ja, auf die schnelle habe ich ein kleine Beispiel gebastelt:
   

   <script language="javascript" type="text/javascript">
   var count = 0;
   function animFunc() {
       if (count <= 200) {
           document.getElementById("animDiv").style.marginTop = count;
           count++;
       } else {
           clearInterval(timer);
       }
   }
   var timer = setInterval("animFunc()", 10);
   </script>
   
   <div id="animDiv" style="height: 100px; widht: 100px; background-color: blue;"></div>

   So ist ein ganz primitive Animation möglich, die du an deine Bedürfnisse anpassen kannst.

6. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?