I’m looking to adapt this really simple and effective jQuery script:
jQuery to animate image from left to right? (thanks DonamiteIsTnt)…
I would like to know how to expand upon it so you could effectively use two images with a “switch” animation. For example, a bird flies to the right of the screen – flip animation – bird appears to fly back to the left – flip animation – flies to the right again.
The “switch” animation I was thinking something along the lines of a 2D image effectively turning upon itself (like a goldfish swimming back and forth in a bowl and how it would appear to us from the front of the glass).
I don’t know if you would use a single image in this case and shrink it from 30px wide to 0px then -30px, etc. to face it the other way. Or need to switch between a right-facing image and a left-facing image. Either way, it would be cool to have it animated.
I have found similar questions on this site referring to the left and right effect and the flip effect, but not combined. So any help would be greatly appreciated!
As a side note: I have linked to http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
Edit: Have got this far…
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function beeRight() {
$("#b").animate({left: "+=300"}, 5000, "swing", beeLeft);
$("#img").attr("src","rightArrow.gif");
}
function beeLeft() {
$("#b").animate({left: "-=300"}, 5000, "swing", beeRight);
$("#img").attr("src","leftArrow.gif");
}
beeRight();
});
</script>
</head>
<body>
<div id="b" style="position:absolute;"><img id="img" src="rightArrow.gif"></div>
</body>
How would I then add an animated image swap such as: http://davidwalsh.name/demo/css-flip.php – needless to say, does not need to be as complicated. I’m looking to do this with img’s, not div’s. I understand how something like this would be done in CSS but I do not know how to incorporate it with the jQuery/Javascript.
Thanks again!
Depending on the browsers you’re targeting, you could achieve the effect entirely in CSS3. Use a couple of classes to represent the beginning and ending states and some
translatex transformsandscalex transformsto handle the flipping. Then add CSStransitionproperty to animate. Then you can use whatever you like to trigger the class change,:hover, jQuery timer, element click, whatever.