我期待使用jQuery删除使用GIF的创建一个相当简单的动画的需要。
我要的是有四个阶段的图像。 1）没有示出2）的图像3的第一部分）中的图像4的第二部分）的图像的第三部分 - 重新开始
我想我需要创建图像的阶段，然后使用“替换当前图像与下一个”使用jQuery技术来创建动画。 这可能是与回调很容易。
接下来的部分是有这个动画出现在好几个地方以前的动画已经完成加载后。 再次，可以很容易与回调。
我是后此的一些想法。 它是愚蠢的不只是使用GIF的？ 或者，这哪是用jQuery做？
Answer 1:
这是很容易和维护链能力：
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);
Answer 2:
检查这个页面演示了使用jQuery的背景动画， 这为它的教程。
思南。
Answer 3:
首先，你可以使用多种格的形象把你所需要的部分背景
css_background位置
然后，你必须拿出DIV，你需要根据动画的你需要的类型来显示。
Answer 4:
如果它的将是恒定的，而不是事件驱动，我推荐使用GIF格式。
但是，如果动画是为了应对出事的页面上，或者如果你只是想一切都被加载后，它开始，然后jQuery的可能要走的路。
您应该只能够改变图像源（或者位置，如果您使用的是单一的图像偏移量）来改变形象。 看看一些“暂停”选项 jQuery的延迟图像之间的变化。
未经测试的例子（从西蒙在上面的链接应答所得出）：
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 5:
使用动画GIF - 这就是他们的制作。 我敢肯定，它可以破解一起使用JQuery解决方案，但你将支付增加开发时间和复杂性为代价。
此外，你应该认识到，通过定制的JQuery / CSS的解决方案去，你在做决定紧密结合动画的页面，其上。 如果有人想什么，包括在不同的页面动画？ 他们将有超过一串代码，而不是一个单一的GIF文件进行复制。 如果有人想将其包含在电子邮件或电源点的演示？ 能不能做到？
Answer 6:
有没有可能给你的四个图像合并成一个精灵（所有四个图像1倍真正的图形包括与非重叠的）？ 从性能的角度来看，客户端的浏览器只具有让您的每个四象4名的请求代替，下载一个图像。
创建动画将如使用由Damovisa上面建议的技术中，只是做它使用一些块元件，设置该单个图像作为背景和设定元件的尺寸，以一个单一的图像的“平铺”的大小为简单以及改变背景位置的CSS特性。 我不能完全确定这（请纠正我，如果我错了），但它似乎是一个不太昂贵的操作移动的背景图像，而不是周围居然换了四个不同的图像。
至于可移植性和可重用性，你可以只创建一个jQuery插件，能在多个地方使用它。
文章来源: jQuery GIF Animations
