jQuery: Bild vor und zurück rotieren

pixel1991 · 6. Dezember 2012

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:

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

pixel1991 · 6. Dezember 2012

Habe in einem anderen Forum folgende Lösung bekommen:

Wie wäre es damit?

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

Code:

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

            });

jQuery: Bild vor und zurück rotieren

pixel1991

Grünschnabel

pixel1991

Grünschnabel

Neue Beiträge