✔ Animationsproblem

S

sharK223

Mitglied
Hallo leute.

Ich wollte auf meiner seite oben das logo mit dem seitentitel animiren, beim draufklicken soll es ein stück nach rechts fahren. Jedoch funktioniert das ganze noch nicht und ich weis einfach nicht woran es liegt...
Seite:
http://shark223.bplaced.de/

Code:
Code: 
<html>

<head>
<meta http-equiv="Content-Language" content="de">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Neue Seite 1</title>
    <script type="text/javascript">
    function animiere() {
            var logo = document.getElementById("logo");
            var position = parseInt(logo.style.left);

            position++;
            logo.style.left = postition

            if (position < 300) {
                window.setTimeout(animiere, 10);
            }
        }
    </script>
<style type="text/css">
<!--
@import url(/style.css);
-->
</style>
</head>

<body style="margin:0;">
<div id="logo" style="position:absolute;top:0;left:0;width:200;height:200;"><img src="/images/Top.png" /></div>
<table border="0" width="100%" id="table1" style="border-collapse: collapse">
	<tr>
		<td align="right" background="/images/Unbenannt-2.png" height="75" width="100%"><a href="javascript:animiere()">ani</a></td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td>&nbsp;</td>
	</tr>

</table>

</body>

</html>
ach ja noch startet es beim klick auf den link "ani" ganz rechts oben
 
Hi,

Javascript: 
function init(){
        if(document.getElementById){
        obj = document.getElementById("logo");
        obj.style.left = "0";
        }
}
function animiere(){
        if(obj){
                if(parseInt(obj.style.left) < 300){
                        obj.style.left = parseInt(obj.style.left) + 10 + "px";
                        setTimeout("animiere()",50);
                }
        }
}
window.onload = function(){
        init();
}

mfg Maik
 
Falls es dir irgendwann mal in den Sinn kommen sollte, dein HTML-Dokument mit einer entsprechenden Doctype-Deklaration den Browsern im standardkonformen Modus zu übergeben, und es so zu keinem erneuten Animationsproblem kommt, ist die Angabe der Maßeinheit zwingend erforderlich.

Dies gilt übrigens auch u.a. für die width- und height-Deklaration der Box #logo.

mfg Maik
 
Hier kannst du nach Herzenslust mit den Werten spielen:
Code: 
function animiere(){
        if(obj){
                if(parseInt(obj.style.left) < 300){
                        obj.style.left = parseInt(obj.style.left) + 10 + "px";
                        setTimeout("animiere()",50);
                }
        }
}


mfg Maik
 
also ich habe manchmal echt probleme...
Ich wollte das es bei einem neuen klick wieder zurück geht aber jetzt tut sich garnix mehr:
Code: 
function init(){
        if(document.getElementById){
        obj = document.getElementById("logo");
        obj.style.left = "0";
        zähler = "0";
	}
}
function animiere(){
        if(obj){
               if(zähler == 0)
	{
	 if(parseInt(obj.style.left) < 300){
                        obj.style.left = parseInt(obj.style.left) + 10 + "px";
                        setTimeout("animiere()",50);
		zähler = "1";
	}
	else
	{
	 if(parseInt(obj.style.left) > 0){
                        obj.style.left = parseInt(obj.style.left) - 10 + "px";
                        setTimeout("animiere()",50);
		zähler = "0";	
	}
                }
        }
}
window.onload = function(){
        init();
}

## EDIT ##

HA!
Ich habs geschafft^^:
Code: 
    <script type="text/javascript">
function init(){
        if(document.getElementById){
        obj = document.getElementById("logo");
        obj.style.left = "0";
        zähler = "0";
	}
}
function animiere(){
                    if(zähler == 0)
	{
		animiere1();
	}
	else
	{
		animiere2();	
	}

} 


function animiere1()
	{
      	  if(obj){

		 if(parseInt(obj.style.left) < 300){
                      	  obj.style.left = parseInt(obj.style.left) + 10 + "px";
                      	  setTimeout("animiere1()",50);
		zähler = "1";
	}
	}
}


function animiere2()
{
        if(obj){
              
	 if(parseInt(obj.style.left) > 0){
                        obj.style.left = parseInt(obj.style.left) - 10 + "px";
                        setTimeout("animiere2()",50);
		zähler = "0";
	}
	}
}

window.onload = function(){
        init();

}
    </script>
ist zwar etwas unordentlich aber ich habs^^
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück