pixel1991
Grünschnabel
Hallo Liebe Community,
ich bin noch ein totaler newbie im Bereich jquery und ich habe schon viel gegoogelt um auf eine Lösung zu kommen, welche ich bisher nicht gefunden hab.
Problem 1: Ich habe ein Bild, welches ich animieren möchte. Es soll sich 200 px nach recht bewegen und dabei rotieren. Dann größer und wieder kleiner werden. UND ZURÜCK an den Ausgangspunkt ROTIEREN. Und genau da ist das Problem.
Meine Animation kann bisher alles außer zurück rotieren.
Frage: Wie bekomme ich es hin, dass die Grafik auch zurück rotiert?
Problem 2: Ich würde die Funktion gerne nach X Sekunden wiederholen. Da muss ich statt . load wohl was anderes verwenden. Kann mir da jemand helfen?
Frage: Wie kann ich die Funktion erneut laden ohne die Seite neu zu laden?
Hier mein Code:
Vielen Dank im Voraus
ich bin noch ein totaler newbie im Bereich jquery und ich habe schon viel gegoogelt um auf eine Lösung zu kommen, welche ich bisher nicht gefunden hab.
Problem 1: Ich habe ein Bild, welches ich animieren möchte. Es soll sich 200 px nach recht bewegen und dabei rotieren. Dann größer und wieder kleiner werden. UND ZURÜCK an den Ausgangspunkt ROTIEREN. Und genau da ist das Problem.
Meine Animation kann bisher alles außer zurück rotieren.
Frage: Wie bekomme ich es hin, dass die Grafik auch zurück rotiert?
Problem 2: Ich würde die Funktion gerne nach X Sekunden wiederholen. Da muss ich statt . load wohl was anderes verwenden. Kann mir da jemand helfen?
Frage: Wie kann ich die Funktion erneut laden ohne die Seite neu zu laden?
Hier mein Code:
Code:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
<style>
#box {
width: 420px;
height: 50px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="box" style="margin-top: 4em; height: 50px; width: 420px;"><img style="position: relative; cursor: pointer; left: 0px;" id="bild2" src="http://terrorpixel.de/animation/bild.png" width="50" height="50" alt="bild.png" /></div>
<script>
$("#bild2").load(function() { //laedt die Funktion beim Aufruf der Seite
var rotation = function() {
$("#bild2").rotate({
angle: 0,
animateTo: 360, // um 360Grad drehen
callback: rotation,
duration:2000, // dauer der Rotation
easing: function(x, t, b, c, d) {
return c * (t / d) + b;
}
});
// Stoppt die Rotation nach 2 sekunden um bei 360Grad stehen zu bleiben
setTimeout(function() {
$("#bild2").stopRotate();
}, 2000);
}
rotation();
$(this).animate({left: "200px" }, 2000); //Bewegt die Grafik nach rechts
$(this).animate({marginTop: "-20px", width: "100px", height: "100px" }, 2000); // vergroessert die Grafik
$(this).animate({marginTop: "0px", width: "50px", height: "50px" }, 1000); // verkleinert die Grafik wieder
$(this).animate({left: "0px" }, 3000); // bewegt Grafik auf Ausgangspunkt
});
</script>
</body>
</html>
Vielen Dank im Voraus