Question

我希望使用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检查this page for a demo以获取背景动画，并为其教程检查this。

思南。

Answer 3

首先，您可以使用几个div的背景来放置您需要的图像部分

css_background-position

然后你必须根据你需要的动画类型显示你需要显示的div。

Answer 4

使用动画GIF - 这就是它们的用途。我确信可以使用JQuery破解解决方案，但是你需要花费额外的开发时间和复杂性。

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

Answer 5

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

但是，如果动画是为了响应页面上发生的事情，或者如果你只想在加载所有内容后启动它，那么jquery可能就是这样。

您应该能够更改图像源（如果使用单个图像，则更改位置偏移）来更改图像。在jQuery中查看some "pause" options以延迟图像之间的更改。

未经测试的例子（源于Simon在上面链接中的答案）：

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

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

创建动画就像使用Damovisa上面建议的技术一样简单，只使用一些块元素，将这个单个图像设置为背景，并将元素的大小设置为一个“tile”的大小。单个图像，并更改背景位置css属性。我对此并不完全确定（如果我错了，请纠正我），但是移动背景图像而不是实际交换四个不同的图像似乎是一种较便宜的操作。

就可移植性和可重用性而言，您可以创建一个jQuery插件，以便能够在多个位置使用它。

jQuery GIF动画

6 个答案: