Auf Thema antworten 2026

Beitrag

<blockquote data-quote="Enigmon" data-source="post: 2494787" data-attributes="member: 6117">Hier mal ein Ansatz:Es geht sicherlich noch viel besser, aber es ist ein Ansatz denke ich.Getestet mit:Firefox 36.0.4Chrome 41VivaldiIE 9 (hier springt er von Pos. a nach b und macht keine Animation)[code]&lt;!DOCTYPE html&gt;&lt;html lang=&quot;de&quot;&gt;&lt;head&gt;&nbsp; &nbsp; &lt;meta charset=&quot;utf-8&quot;&gt;&nbsp; &nbsp; &lt;title&gt;Div bewegen&lt;/title&gt;&nbsp; &nbsp; &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/style.css&quot;&gt;&nbsp; &nbsp; &lt;script src=&quot;http://code.jquery.com/jquery-latest.js&quot;&gt;&lt;/script&gt;&nbsp; &nbsp; &lt;script type=&quot;text/javascript&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; $(document).ready(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var status = 0;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(&#039;#mover&#039;).click(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(status==0){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; changePosition($(this), &quot;400px&quot;, &quot;5px&quot;, &quot;-540px&quot;, &quot;-200px&quot;, &quot;zurück&quot;);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; status=1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; changePosition($(this), &quot;100px&quot;,&quot;50px&quot;, &quot;0px&quot;, &quot;0px&quot;, &quot;vor&quot;);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; status=0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; function changePosition(element, divWidth, divRadius, divLeft, divTop, divContent){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(element).html(divContent);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(element).css(&#039;width&#039;,divWidth);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(element).css(&#039;border-radius&#039;,divRadius);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(element).css(&#039;-webkit-transition&#039;, &#039;0.5s ease-in&#039;);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(element).css(&#039;-moz-transition&#039;, &#039;0.5s ease-in&#039;);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(element).css(&#039;-o-transition&#039;, &#039;0.5s ease-in&#039;);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(element).css(&#039;transition&#039;, &#039;0.5s ease-in&#039;);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(element).css(&#039;-webkit-transform&#039;, &#039;translate(&#039;+divLeft+&#039;,&#039;+divTop+&#039;)&#039;);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(element).css(&#039;-moz-transform&#039;, &#039;translate(&#039;+divLeft+&#039;,&#039;+divTop+&#039;)&#039;);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(element).css(&#039;-o-transform&#039;, &#039;translate(&#039;+divLeft+&#039;,&#039;+divTop+&#039;)&#039;);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(element).css(&#039;-ms-transform&#039;, &#039;translate(&#039;+divLeft+&#039;,&#039;+divTop+&#039;)&#039;);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(element).css(&#039;transform&#039;, &#039;translate(&#039;+divLeft+&#039;,&#039;+divTop+&#039;)&#039;);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &lt;/script&gt;&nbsp; &nbsp; &lt;style&gt;&nbsp; &nbsp; &nbsp; &nbsp; #content{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 90%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 500px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: 1px solid black;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; #mover{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top: 400px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left: 1000px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: 1px solid blue;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 100px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 100px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 50px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transition: transform 1s;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-align: center;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; &nbsp; &lt;/style&gt;&lt;/head&gt;&lt;body&gt;&nbsp; &nbsp; &lt;div id=&quot;wrapper&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;header&gt;&lt;/header&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;nav&gt;&lt;/nav&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;content&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;mover&quot;&gt;vor&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;footer&gt;&lt;/footer&gt;&nbsp; &nbsp; &lt;/div&gt;&lt;/body&gt;&lt;/html&gt;[/code]LGThomas</blockquote>

[QUOTE="Enigmon, post: 2494787, member: 6117"] Hier mal ein Ansatz: Es geht sicherlich noch viel besser, aber es ist ein Ansatz denke ich. [B]Getestet mit:[/B] Firefox 36.0.4 Chrome 41 Vivaldi IE 9 (hier springt er von Pos. a nach b und macht keine Animation) [code]<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Div bewegen</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(document).ready(function(){ var status = 0; $('#mover').click(function(){ if(status==0){ changePosition($(this), "400px", "5px", "-540px", "-200px", "zurück"); status=1; }else{ changePosition($(this), "100px","50px", "0px", "0px", "vor"); status=0; } }); function changePosition(element, divWidth, divRadius, divLeft, divTop, divContent){ $(element).html(divContent); $(element).css('width',divWidth); $(element).css('border-radius',divRadius); $(element).css('-webkit-transition', '0.5s ease-in'); $(element).css('-moz-transition', '0.5s ease-in'); $(element).css('-o-transition', '0.5s ease-in'); $(element).css('transition', '0.5s ease-in'); $(element).css('-webkit-transform', 'translate('+divLeft+','+divTop+')'); $(element).css('-moz-transform', 'translate('+divLeft+','+divTop+')'); $(element).css('-o-transform', 'translate('+divLeft+','+divTop+')'); $(element).css('-ms-transform', 'translate('+divLeft+','+divTop+')'); $(element).css('transform', 'translate('+divLeft+','+divTop+')'); }; }); </script> <style> #content{ width: 90%; height: 500px; border: 1px solid black; } #mover{ position: absolute; top: 400px; left: 1000px; border: 1px solid blue; width: 100px; height: 100px; border-radius: 50px; transition: transform 1s; text-align: center; } </style> </head> <body> <div id="wrapper"> <header></header> <nav></nav> <div id="content"> <div id="mover">vor</div> </div> <footer></footer> </div> </body> </html>[/code] LG Thomas [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ▲ = 5, ▼ = 2 und ■ = 7, was ist ▲ × ▼ + ■?