Flick throught images on hover, irregular animation speed

Context: I've got a block of images, absolutely positioned on top of each other. On mouseover the images are shown, one after the other, by adding a css class which moves the image to the top of the pile. When the last image is reached the first image is shown, and this continues until mouseout.

Reference: Here is a reference site to see a similar effect. (mouseover the image block).

HTML:

<div id="flicker">
    <img src="example1.gif" />
    <img src="example2.gif" />
    <i开发者_高级运维mg src="example3.gif" />
</div>

Code:

var flickerImg = jQuery('#flicker img');

jQuery('#flicker').hover(
      function() {
        flicker = setInterval(function() {
          if (flickerImg.last().hasClass('active')) {
            flickerImg.removeClass('active').first().addClass('active');
          }
          else {
            jQuery('#flicker img.active').removeClass('active')
                                         .next().addClass('active');
          }
       }, 100);
    },
    function() { 
        clearInterval(flicker); 
    });

Question: The animation seems to speed up after a few iterations. Is there a better way of coding this, or a change to give a more consistent animation?

I set up an example of how I might do it to mimic the reference site at http://jsfiddle.net/brianflanagan/kLJd3/. I'm not sure I'm seeing the speed up that you're experiencing, though at times it did feel like it was speeding up. I left it running for 5 minutes or so to see if the effect continued, but it didn't. I suspect that it may be more of an optical illusion than anything else. I tested in Chrome 11 and I tried different interval settings to see if it made any difference, but it seemed to execute consistently for me regardless of the interval.