Terrorpixel
Threadersteller
Dabei seit: 21.06.2011
Ort: Wuppertal
Alter: 32
Geschlecht:
|
Verfasst Fr 30.11.2012 10:01
Titel jQuery: Ein Bild rotieren und animieren |
|
|
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.
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>
|
|
|