| 

.NET C# Java Javascript Exception

3
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:
<!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>
06.12.2012
terrorpixel 11 2
2 Antworten
1
Wie wäre es damit?

Eine neue Funktion rotate2() zum Zurückrotieren in 3 Sekunden erstellen und diese NACH dem Verkleinern aufrufen.

$("#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);

};
var rotation2 = function() {
$("#bild2").rotate({
angle: 360,
animateTo: 0, // um 360Grad drehen
callback: rotation2,
duration:3000, // dauer der Rotation
easing: function(x, t, b, c, d) {
return c * (t / d) + b;
}
});
// Stoppt die Rotation nach 3 sekunden um bei 0Grad stehen zu bleiben
setTimeout(function() {
$("#bild2").stopRotate();
}, 3000);

};
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, function() {rotation2();}); // verkleinert die Grafik wieder und rotiert anschließend für 3 Sekunden
$(this).animate({left: "0px" }, 3000); // bewegt Grafik auf Ausgangspunkt

});
06.12.2012
devnull69 36 1
Oha. Ihr seid so klasse! Tausend Dank an dich und lungatigs. Soetwas ähnliches hatte ich auch versucht und zwar einfach die Rotation an einer bestimmten stelle nochmals abzuspielen. Bin das allerdings etwas falsch angegangen.
terrorpixel 06.12.2012
0
Du musst halt, nachdem die Animation für das Vorwärts-Rotieren abgeschlossen ist, eine neue Animation triggern, die die Veränderungen wieder rückgängig macht.

Also
animateTo: -360
damit er wieder bei 0 rauskommt. Bei den ganzen animate() nach der Rotation natürlich entsprechend.

Der Übersichtlichkeit halber würd ich Dir empfehlen, Dir zwei Funktionen zu schreiben, eine die sämtliche Vorwärts-Animationen macht und eine die eben entsprechend die Rückwärts-Animationen macht.

Die Vorwärts-Funktion rufst Du dann beim onload auf, die triggert dann nach dem settimeout von X Sekunden die Rückwärts-Funktion und die triggert dann nach dem settimeout von X Sekunden wieder die Vorwärts-Funktion.

So hast Du dann einen einfachen Loop und kannst die Animationen beliebig anpassen, ohne groß was am Prinzip ändern zu müssen.
06.12.2012
lunatigs 1,3k 2 8
1
devnull69 war schneller und auch besser ... also ignoriert das hier :)
lunatigs 06.12.2012

Stelle deine Animation-Frage jetzt!