jQuery GIF动画

Question

我正在寻找使用jQuery删除使用GIF创建相当简单的动画的需要。

我想要的是一个图像有四个阶段。 1）没有显示 2）图像 3）图像 4）图像 的第三部分，第二部分的第一部分 - 重新开始

我想我需要创建图像阶段然后使用jQuery用'使用下一个'技术替换当前图像来创建动画。回调可能很容易。

接下来的部分是让这个动画出现在上一个动画完成加载之后的几个地方。再一次，回调可能很容易。

我对此有过一些想法。不使用GIF是不是愚蠢？或者这可以用jQuery来完成？

Answer 1

首先，你可以使用几个div的背景把图像的一部分，你需要

css_background-position

，那么你必须显示DIV，你需要根据动画的你需要的类型显示。

Answer 2

使用动画GIF - 这是他们的目的。我相信它可以使用JQuery来解决一个解决方案，但是您会花费额外的开发时间和复杂性。

此外，您应该认识到，通过使用定制的JQuery/CSS解决方案，您正在决定将动画紧密结合到它所在的页面上。如果有人想将动画包含在不同的页面上怎么办？他们必须复制一堆代码而不是一个GIF文件。如果有人想将它包含在电子邮件或Power-point演示文稿中怎么办？不能做...

Answer 3

如果它是恒定的，而不是事件驱动，我建议使用GIF。

但是，如果动画是为了响应页面上发生的事情，或者如果您只希望在加载所有内容后启动它，那么jquery可能就是要走的路。

您应该可以更改图像来源（或使用单个图像时的位置偏移）来更改图像。看看jQuery中的some "pause" options来延迟图像之间的变化。

未经测试的例子（从西门的回答在上面的链接获得）：

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 4

检查this page for a demo为背景的动画与jQuery和this其教程。

思南。

Answer 5

是否可以将你的四个图像组合成一个精灵（1个真实图形，包括所有四个图像，包括&不重叠）？从性能角度来看，客户端的浏览器只需要下载一张图片，而不是为每张图片发出4次请求。

创建动画就像使用上面Damovisa建议的技术一样简单，只使用某个块元素进行设置，将该单个图像设置为背景并将元素的大小设置为“tile”的大小的单一图像，并改变背景位置的CSS属性。我对此并不完全确定（请纠正我，如果我错了），但它似乎是一个更便宜的操作来移动背景图像，而不是实际交换出四个不同的图像。就可移植性和可重用性而言，您可以创建一个jQuery插件，以便能够在多个位置使用它。

Answer 6

这是非常容易和维护链能力：

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