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.

Answer 3

First you can use the background of several div putting the part of image you need

css_background-position

Then you have to show the div as you need to be displayed depending on the type of animation you need.

Answer 4

Use animated GIFs - this is what they are made for. I'm sure its possible to hack together a solution using JQuery, but you would pay a cost in added development time and complexity.

Additionally, you should recognize that by going with a customized JQuery/CSS solution, you are making a decision to tightly couple your animation to the page that its on. What if someone wants to include the animation on a different page? They would have to copy over a bunch of code instead of a single GIF file. What if someone wants to include it in an email or Power-point presentation? Can't be done...

Answer 5

If it's going to be constant and not event-driven, I'd recommend using gifs.

If, however, the animation is in response to something happening on the page, or if you only want it to start after everything is loaded, then jquery is probably the way to go.

You should just be able to change the image source (or the position offset if you're using a single image) to change the image. Have a look at some "pause" options in jQuery to delay changes between images.

Untested example (derived from Simon's answer in the link above):

function chg1() { $('#myimage').attr('src', ''); }
function chg2() { $('#myimage').attr('src', 'image1src.jpg'); }
function chg3() { $('#myimage').attr('src', 'image2src.jpg'); }
function chg4() { $('#myimage').attr('src', 'image3src.jpg'); }

function StartAnimation() {
    setTimeout(chg1, 2000);  // blank after 2 seconds
    setTimeout(chg2, 4000);  // img 1 after 4 seconds
    setTimeout(chg3, 6000);  // img 2 after 6 seconds
    setTimeout(chg4, 8000);  // img 3 after 8 seconds
    setTimeout(StartAnimation, 8000);  // start again after 8 seconds
}

StartAnimation();  // start it off

Answer 6

Would it be possible to combine your four images into a sprite (1 real graphic with all four images included & non-overlapping)? From a performance standpoint, the client's browser is only having to download a single image in stead of making 4 requests for each of your four images.

Creating the animation would be as simple as using the technique suggested above by Damovisa, only doing it using some block element, setting this single image as a background and setting the size of the element to the size of one "tile" of the single image, and changing the background-position css property. I'm not completely sure about this (please correct me if I'm wrong), but it seems like a less expensive operation to move a background image around rather than actually swapping out four different images.

As far as portability and reusability, you could just create a jQuery plugin to be able to use it in several places.