3

http://i28.tinypic.com/2j0zbxi.gif

这可以通过 jQuery 实现吗？基本上如上图所示，我有蓝色背景、地图图像和文本图像。我想在页面加载或加载此图像时实现这种动画。

4

4 回答 4

4

您需要结合使用 animate() 和 delay() 来为每张幻灯片计时。这是我最近使用它放在一起的一个例子。

http://www.panthersweat.com/thursday/

于 2010-07-14T17:16:24.810 回答
2

是的，你可以通过混合 javscript 和 jquery 来做到这一点......我之前在横幅上做过一些事情......

代码如下

var timerCount = 1;
var timer = setInterval('sliderController()',5000);


function sliderController() {
    status = changeSlide(timerCount);
    if(status == 1) {
        timerCount++;
    }
    else{
        timerCount = 1;
    }
}

function changeSlide(timerCount)    {
    if(timerCount != 3) {
        leftValue = -1004 * timerCount;
        $('#banner_slider_container #banner_slides_container').stop().animate({'left':leftValue,'opacity':0.3},'slow',function()    {
            $('#banner_slider_container #banner_slides_container').animate({'opacity':1},'slow');
        });
        return 1;
    }
    else    {
        leftValue = 0;
        $('#banner_slider_container #banner_slides_container').stop().animate({'left':leftValue,'opacity':0.3},'slow',function()    {
            $('#banner_slider_container #banner_slides_container').animate({'opacity':1},'slow');
        });
        return 0;
    }

}

我想这会对你有所帮助.......

于 2010-07-14T11:37:47.213 回答
1

从 1.4 开始，jQuery 有了 .delay() 函数，你可以在动画中使用。也许这就是你需要的？

于 2010-07-14T15:08:26.590 回答
1

基本上这就是 jQuery 的 .animate() 的用途。你必须用 CSS 表达每一个必要的动画状态/步骤，但是像上面这样的简单动画应该不是问题。

http://api.jquery.com/animate/

于 2010-07-14T11:05:52.023 回答