Slow Button Move

Guten Mittag Forenmitglieder,

ich hab beim Designen meiner Webseite viele andere Webseiten überflogen, um mir Anregungen für die Gestaltung zu holen.
Dabei geht es mir hauptsächlich darum, mit CSS und Javascript verschiedene Effekte herzustellen.

Bei einem komme ich leider nicht weiter. Den Effekt habe ich auf folgender Seite gefunden:

Flame-Development

Wenn man mit der Maus über die Buttons (Open GL, C++, HTML, CSS, PHP) fährt bewegen sie sich langsam nachen oben.

Ich hab leider keine Möglichkeit gefunden eine Funktion für diesen Effekt zu schreiben.

Einen Ansatz möchte ich euch hier trotzdem vorstellen.

<script language="JavaScript">
function _up(){    
    var wert = document.getElementById("Schild").style.marginTop.replace("px", "");
    if(wert > 30){
        wert--;
        document.getElementById("Schild").style.marginTop = wert+"px";
        aktiv_u = window.setTimeout("_up()", 30);
    }
}
</script>

Der Button, der sich nach Oben bewegt hat die ID=„Schild“
onmouseover wird die funktion _up() aufgerufen und das Schild bewegt sich nach oben
onmouseout wird die funktion _down() aufgerufen (sie macht das gleiche wie _up() ) nur in umgekehrte richtung

Leider beginnt das ganze an zu zittern und bewegt sich nach einiger zeit unkontrolliert nach oben und unten

Könntet ihr mir eventuell mit ein paar Tips auf die Sprünge helfen?

Mfg Kromat

Seitdem ich jQuery kennengelernt habe, bin ich bequem geworden. :stuck_out_tongue:

Hier bewegt sich das Bild über einen Zeitraum von 1500 ms um 30 Pixel.

[HTML]

#pic { position: relative; top: 100px; left: 100px; } pic
<script>
    $('#pic').hover(
        function() {
            $(this).animate({
                top: '70px'
            },1500);
        },
        
        function() {
            $(this).animate({
                top: '100px'
            },1500);
        }
    );
</script>
[/HTML]

Von jQuery hab ich vor deinem Beitrag noch nie was gehört :wink: Aber habs jetzt genau so umgesetzt.

Der Effekt ist genau der, den ich gesucht habe.

Vielen Dank für deine Hilfe.