mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 15:12 Benutzername: Passwort: Auto-Login

Thema: jQuery: Ein Bild rotieren und animieren vom 30.11.2012


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> jQuery: Ein Bild rotieren und animieren
Autor Nachricht
Terrorpixel
Threadersteller

Dabei seit: 21.06.2011
Ort: Wuppertal
Alter: 32
Geschlecht: Weiblich
Verfasst Fr 30.11.2012 10:01
Titel

jQuery: Ein Bild rotieren und animieren

Antworten mit Zitat Zum Seitenanfang

Hallo liebes Forum,

ich hab gerade ne Blockade und hoffe ihr könnt mir helfen:
www.terrorpixel.de/animation/index.html
Auf dieser Seite soll eine Animation entstehen.
Das Bild (50x50px) soll 200px nach rechts ROTIEREN dann in gerader Position wieder raus kommen (sprich 360Grad), größer werden, kleiner werden UND wieder ZURÜCK ROTIEREN.

Problem 1:
Die erste Rotation nach rechts soll NACH 1 rotation stoppen!
Habe es bisher nur hinbekommen, dass er nach einer gewissen Zeit stoppt.
Da die Animation 2sek nach rechts wandert und sich dabei um 360° drehen soll dachte ich, dass wenn ich die Rotation nach 2sek stoppe er bei 360° rauskommen müsste. Das funktioniert bisher.
Hä? Hä? Hä? Gibt es auch die möglichkeit die rotationen zu zählen und danach zu stoppen?

Problem 2:
Nachdem die Animation größer und wieder kleiner wurde soll sie wieder zurück rotieren. Dachte, wenn ich den gleichen Code nochmal ans ende füge könnte das klappen. Dem ist leider nicht so.

Hier der 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="bild.png" width="50" height="50" alt="bild.png" /></div>
        <script>
            $("#bild2").load(function() {
                var rotation = function() {
                    $("#bild2").rotate({
                        angle: 0,
                        animateTo: 360,
                        callback: rotation,
duration: 2000,
                        easing: function(x, t, b, c, d) {
                            return c * (t / d) + b;
                        }
                    });
                    setTimeout(function() {
                        $("#bild2").stopRotate();
                    }, 2000);

                }
                rotation();
                $(this).animate({left: "200px", }, 2000);
                $(this).animate({marginTop: "-20px", width: "100px", height: "100px", }, 2000);
                $(this).animate({marginTop: "0px", width: "50px", height: "50px", }, 1000);
                $(this).animate({left: "0px", }, 3000);
                $(this).animate({width: "50px"}, 2000);
            });
        </script>
    </body>
</html>
  View user's profile Private Nachricht senden
immerIch

Dabei seit: 19.10.2010
Ort: #mein{display:block}
Alter: 35
Geschlecht: Männlich
Verfasst Fr 30.11.2012 10:46
Titel

Antworten mit Zitat Zum Seitenanfang

Dazu bietet das Plugin die Methode "step", mit der du die Änderung des Winkels abfangen kannst:
http://jsfiddle.net/nUJYU/

Du musst eben nur mit einer if()-Abfrage den current-Wert auf deinen gewünschten Zielwinkel abfragen.
Code:

if(current == 278) {
// Dein Code :)
}


Gruß
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Karlarsch

Dabei seit: 05.02.2007
Ort: -
Alter: 58
Geschlecht: Männlich
Verfasst Fr 30.11.2012 12:14
Titel

Antworten mit Zitat Zum Seitenanfang

Hast du dir schon mal CSS3 animation angeschaut? Benötigt allerdings ein Fallback für IE<10.

Gruß
Karl
  View user's profile Private Nachricht senden
Terrorpixel
Threadersteller

Dabei seit: 21.06.2011
Ort: Wuppertal
Alter: 32
Geschlecht: Weiblich
Verfasst Fr 30.11.2012 14:16
Titel

Antworten mit Zitat Zum Seitenanfang

Vielen Dank für die Hilfe immerIch.

CSS3 habe ich mir auch schon angesehen. Damit war das ganze für mich um einiges einfacher. Diese Animation soll allerdings in einem Bereich eingesetzt werden wo oft noch IE7+ Verhältnisse herrschen :S da komm ich mit CSS3 nicht so weit und habe gehofft mit jQuery mehr abdecken zu können.
  View user's profile Private Nachricht senden
 
Ähnliche Themen Menü per jquery animieren
Bild verpixelt beim rotieren mit Flash
Bild animieren..
Bild animieren???
jQuery - "appended" Element animieren?
Bild animieren in PowerPoint
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.