Hallo!
Longtime-user, firsttime-writer. (ich hoffe, dass ich alles richtig mache vv;)
Ich habe das Forum/Internet die letzten zwei Tage durchsucht, jedoch keine Lösung für mein Problem gefunden.
Also, ich möchte eine Grafik langsam von ganz links im Browser (left: 0;) nach ganz rechts im Browser (left: 100%;) bzw. über das Browserfenster hinaus (left: sagen wir mal 1800px;) bewegen. Danach soll die Grafik dann wieder an die ursprüngliche Position zurück und der Vorgang soll wiederholt werden, also eine Endlosschleife.
Ich habe es mit jQuery .animate() versucht, jedoch ist das immer zu schnell (auch wenn ich eine lächerlich hohe Zeitangabe mache). Als nächstes habe ich es mit einer Mischung aus jQuery (Kompabilitätsmodus da ich mit Joomla! arbeite) und normalem javascript versucht. Firebug zeigt mir keine Fehler an, die Grafik bewegt sich jedoch trotzdem nicht.
Hier mein Code:
Javascript
jQuery(document).ready(function(){ //jQuery anstatt $ wegen Kompabilitätsmodus
var avar = window.setInterval("afunction()", 10); // 10 ist nur ein Probewert
});
function afunction(){
var pos = 0;
if(pos < 1800) {
pos += 1;
jQuery('img.thisone').css('left', pos);
} else {
pos = 0;
jQuery('img.thisone').css('left', pos);
}
}
HTML
<body>
<img class="thisone" src="templates/<?php echo $this->template;?>/images/srctoimg.png" alt="the img alt" />
</body>
CSS
img.thisone {
position: absolute;
left: 0;
top: 0;
z-index: -99;
}
DANKE fürs Lesen/Helfen!
Difuoan