jQuery的GIF动画 [英] jQuery GIF Animations

问题描述

我期待使用jQuery删除使用GIF的创建一个相当简单的动画的需要。

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

我要的是有四个阶段的图像。
 1）没有什么表现
 2）图像的第一部分
 3）图像的第二部分
 4）图像的第三部分
  - 重新开始

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

我想我需要创建图像的阶段，然后使用一个使用jQuery技术来创建动画下一个取代目前的形象。这可能是pretty容易回调。

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.

接下来的部分是有这个动画出现在previous动画已经完成加载后几个地方。再次，可能是容易的回调。

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.

我是后此的一些想法。它是愚蠢的不只是使用GIF的？或者，这哪是用jQuery做？

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

推荐答案

这是容易得多，并保持链能力：

This is much easier and maintains chain-ability:

JQuery的：

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

标记：

<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>

插件：

(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);

这篇关于jQuery的GIF动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！