Question

我对jQuery很新。我正在尝试创建一个照片墙，当页面加载时，图像将开始逐渐淡出。这是HTML：

<div id="photoWall">
   <a href=""><img src="a.jpg" /></a>
   <a href=""><img src="b.jpg" /></a>
   <a href=""><img src="c.jpg" /></a>
</div>

和失败的jQuery：

$('#photoWall a').hide();
$('#photoWall a:eq(0)').fadeIn();
if ($('#photoWall a:before:visible')) {
    $(this).fadeIn();
}

我的逻辑是，首先隐藏包含图像的所有链接。然后淡化第一个链接，然后检查以前的链接是否可见，如果在当前链接中淡入，依此类推，直到显示所有链接。如何让这个工作？

Answer 1

There is no :before selector.
在动画之后运行的任何代码，例如.fadeIn()之后的.fadeOut()，都需要在回调中发生。
这里没有循环，所以它只会在第一张和第二张图片中淡出。

这比你所拥有的看起来更漂亮，但它并不太糟糕：

$(function ()
{
    function show($links, i)
    {
        var $link = $links.eq(i);
        if ( !$link.length ) return;
        $link.fadeIn(function ()
        {
            show($links, ++i);
        });
    }

    show($('#photoWall a').hide(), 0);
});

演示：http://jsfiddle.net/mattball/ECWxM/

Answer 2

function fadethem(elem) {
    elem.fadeIn('slow', function() {
        if (elem.next().length > 0) fadethem(elem.next());
    });
}

fadethem($('#photoWall a:eq(0)'));

查看小提琴：http://jsfiddle.net/QFccn/1/

我使用CSS而不是javascript将图像隐藏在pageload上。否则，图像将一直显示，直到DOM准备就绪。

在页面加载时，我用第一张图像调用淡入淡出函数。

如果动画完成（fadeIn()的回调），我会再次使用下一个元素调用该函数（如果还有更多）。

Answer 3

使用delay()^[docs]方法时，这变得非常简单。

$('#photoWall a').hide().each(function(i) {
    $(this).delay(i * 400).fadeIn();
});

示例： http://jsfiddle.net/eRgPt/ （从@Matt Ball借用小提琴。）

编辑：

要解释（所以下选民可以理解），这很简单。

使用each()^[docs]方法，您可以单独操作与选择器匹配的每个元素。

您还会获得传递给回调的 index 参数。所以这一切都是将当前索引乘以动画的总长度，使每个连续元素比之前的元素开始 n 毫秒。

   0 * 400 = 0
   1 * 400 = 400
   2 * 400 = 800
   3 * 400 = 1200

此外，您可以轻松地将动画的持续时间分配给变量，以便更改动画的持续时间和延迟。

var duration = 1000;

$('#photoWall a').hide().each(function(i) {
    $(this).delay(i * duration).fadeIn(duration);
});

示例： http://jsfiddle.net/eRgPt/1/

如何让这个简单的jQuery工作？

3 个答案: