0

我正在尝试创建一个 jquery 'for loop'，用于从数组中获取图像 url，并使用它们来更改具有类“.mobile”的 div 的背景。

该数组填充了 3 个 url。问题是第一个和第二个 url 被忽略，第三个图像显示 3 次。另外，我尝试插入一个警报以查看“i”变量包含的内容，并且警报彼此相继出现 3 次，从 0 迭代到 2，而代码在每个警报之前都没有执行。

这是代码：

$(document).ready(function(){
    var images = [ "url(images/image1.png)","url(images/image2.png)","url(images/image3.png)" ];        
    var i;
    for (i = 0; i < images.length; i = i+1) {
        $('.mobile').delay(2000).animate({'opacity': '0.0'}, 1000);
        $('.mobile').css("background-image", images[ i ]);
        $('.mobile').delay(2000).animate({'opacity': '1.0'}, 1000);
        alert(i);
    };

});

回顾一下，我想在下一个图像出现之前延迟显示数组中的每个背景图像。

我对 jQuery 还是很陌生，所以任何帮助都将不胜感激！:)

4

3 回答 3

2

尝试

$(document).ready(function () {
    var images = ["url(http://placehold.it/32/ffff00)", "url(http://placehold.it/32/ff0000)", "url(http://placehold.it/32/000000)"];

    function render(images) {
        var img = images.shift();
        images.push(img);

        $('.mobile').delay(2000).animate({
            'opacity': '0.0'
        }, 1000, function () {
            console.log(img)
            $(this).css("background-image", img).delay(2000).animate({
                'opacity': '1.0'
            }, 1000, function () {
                render(images);
            });
        });
    }

    render(images)

});

演示：小提琴

于 2013-09-20T10:03:46.597 回答
0

问题出在您的 JQuery 选择器上，$('.mobile')它将选择与类选择器匹配的所有元素，因此您的所有元素的背景图像都会随着每个循环而改变。

您可以使用eq(i)基于索引选择正确的元素，如下所示：

for (i = 0; i < images.length; i = i+1) {
    var $item = $('.mobile').eq(i);
    $item.delay(2000).animate({'opacity': '0.0'}, 1000);
    $item.css("background-image", images[ i ]);
    $item.delay(2000).animate({'opacity': '1.0'}, 1000);
};
于 2013-09-20T10:00:58.840 回答
0

有几件事。如果不透明度为“0.0”，则不会显示图像。如果你想在动画完成后做一些事情，传递一个回调函数。

于 2013-09-20T10:03:36.413 回答