jQuery GIF Animations

Question

I'm looking to use jQuery to remove the need of using a GIF's to create a fairly simple animation.

What I want is an image to have four stages. 1) Nothing showing 2) The first part of the image 3) Second part of the image 4) Third part of the image - Start over

I was thinking I'd need to create the image stages then use a 'replace the current image with the next' technique with jQuery to create the animation. That could be pretty easy with callbacks.

The next part is to have this animation appear in several places after the previous animation had completed loading. Once again, could be easy with callbacks.

I was after some thoughts on this. Is it stupid not to just use GIF's? Or could this be done with jQuery?

Answer 1

This is much easier and maintains chain-ability:

JQuery:

$(document).ready(function(){
    //rotator - delay, children
    $('#slideshow').rotator(50, 'img');
});

Markup:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="scripts/jquery.rotator.js"></script>

<style type="text/css">
#slideshow {
    position:absolute; //or whatever you need
    display:block;
    top:0px;
    left:0px;
}
#slideshow img {
    position:absolute;
    opacity:0;
}
</style>

<!-- SLIDESHOW -->
<div id="slideshow">
  <img src="images/1.png">
  <img src="images/2.png">
  <img src="images/3.png">
</div>

Plugin:

(function( $ ){
    $.fn.rotator = function(delay, child){
        //set curImage val
        var currImg = 0;
        var currIt = true;
        //set array of images
        var ss = $('#slideshow').children(child);
        var ssize = ss.size();
        setInterval(function() {
            if(currIt){
                $(ss[currImg]).css('opacity','1');
                currIt = !currIt;
            }else if (!currIt){
                $(ss[currImg]).css('opacity','0');
                $(ss[currImg+1]).css('opacity','1');
                currIt = !currIt;
                currImg++;
            }
            //reset
            if(currImg >= ssize){
                currImg = 0;
                $(ss[currImg]).css('opacity','1');
            }
        }, delay);
        return this;
    };
})(jQuery);

Answer 2

Check this page for a demo for background animation with jquery and this for its tutorial.

Sinan.