nicht angemeldet
variable mit Element ersetzen
Hallo Leute,
ich hab derzeit auf Arbeit die Aufgabe, für einen Button eine Animation zu Entwicklen (mit JS).
Aussehen soll es am Ende so, dass die Überschrift nach oben geht und der Untertitel erscheint, wenn ich die Maus darauf halte. Das gleiche natürlich auch umgedreht. Mein Problem, ich hab es zwar schon geschafft, dass die Schrift nach langsam nach oben geht aber noch nicht, dass sie mit der Selben Animation wieder runter geht (aus irgend einem Grund geht es nicht einmal mehr hoch, wenn ich die Animation für runterfahren einsetze).
Chrome sagt gar nichts, IE behauptet Üngültiges Argument (Zeile 10, Zeichen 4).
Hier mein Code:
<html>
<head>
<script type="text/javascript">
function HideText()
{
var abstand = parseInt(window.document.getElementById('head').style.marginTop);
window.document.getElementById('text').style.visibility = 'visible';
var neuerabstand = abstand - 1 + "px";
window.document.getElementById('head').style.marginTop = neuerabstand;
if(abstand > 10)
{
window.setTimeout("HideText()", 100);
}
}
function ShowText()
{
var abstand = parseInt(window.document.getElementById('head').style.marginTop);
window.document.getElementById('text').style.visibility = 'hidden';
var neuerabstand = abstand + 1 + "px";
window.document.getElementById('head').style.marginTop = neuerabstand;
if(abstand > 70)
{
window.setTimeout("ShowText()", 100);
}
}
</script>
<style>
#box
{
position:absolute;
top:90px;
left:230px;
width:300px;
height:150px;
z-index:2;
background-color:#696969;
}
p
{
margin-top: 70px;
}
</style>
</head>
<body>
<div id="box" onmouseover="HideText()" onmouseout="ShowText()">
<p align="center" id="head">Geht nach oben.</p>
<p align="center" id="text" style="visibility:hidden">Erscheint nachdem die Maus draufhält</p>
</div>
</body>
</html>
Könnt ihr mir helfen?
Meine Vermutung ist ja, dass ich nicht einfach die Variable mit dem getElementById austauschen kann. Wie kann ich dann aber die Variable wieder in das Element einfügen?
MfG
-
Beachte bitte, dass OnMouseOut auch dann feuert, wenn das Element unter der Maus wegbewegt wird.
Darüber hinaus solltest du nicht die position des elementes als referenz nehmen, sondern besser die position der maus, ob diese über dem element liegt oder nicht. vielleicht hilft dir der denkansporn, dass du die eigentliche "animation" mit semi-elementen (nicht den elementen, die das event auslösen) darstellst? Sodass du stets die grundposition hast, auf der du arbeiten kannst.
Ist nur so ne Idee von mir. Ich könnte dir natürlich problemlos vorschlagen, wie man es schnell, (nicht 100%ig) effektiv und dazu noch dynamisch (leicht anpassbar) erstellen könnte, was aber bestimmt nicht das ziel deiner aufgabe ist, da du das immerhin selbst herausfinden musst. Learning by Doing ;) was du einmal selbst gelöst hast, kannst du später immernoch selber lösen ;)