1

我需要将每个名为 transparent.png 的图像依次脉动（或淡入、淡出）3 次，而不是像现在这样在同一时间。

transparent.png 位于每个图像的顶部并提供淡出效果。

我用：

  • jQuery 1.7.2
  • jQuery UI 1.8.21

这是我的代码：

jQuery('.transparent').each(function(index) {
    jQuery(this).effect("pulsate", {times:3}, 1000);
});

<div id="content">
    <a class="frontimage projectleft" href="?folder=/sculptures">
        <img width="200" title="" alt="" src="0054_46.jpg">
        <img width="200" title="" alt="" src="transparent.png" class="transparent" style="opacity: 1; display: block;">
    </a>
    <a class="frontimage projectleft" href="?folder=/furniture">
        <img width="200" title="" alt="" src="0076_20.jpg">
        <img width="200" title="" alt="" src="transparent.png" class="transparent" style="opacity: 1;">
    </a>
    <a class="frontimage projectright" href="?folder=/paintings">
        <img width="200" title="" alt="" src="156_52.jpg">
        <img width="200" title="" alt="" src="transparent.png" class="transparent" style="opacity: 1;">
    </a>
    <a class="frontimage projectleft" href="?folder=/sculptures">
        <img width="200" title="" alt="" src="174_36.jpg">
        <img width="200" title="" alt="" src="transparent.png" class="transparent" style="opacity: 1;">
    </a>
    <a class="frontimage projectleft" href="?folder=/furniture">
        <img width="200" title="" alt="" src="276_1.jpg">
        <img width="200" title="" alt="" src="transparent.png" class="transparent" style="opacity: 1;">
    </a>
    <a class="frontimage projectright" href="?folder=/paintings">
        <img width="200" title="" alt="" src="290_200076-01.jpg">
        <img width="200" title="" alt="" src="transparent.png" class="transparent" style="opacity: 1;">
    </a>
</div>
4

2 回答 2

1

通常的方法是effect()在您提供给当前调用的回调中链接下一个调用。

为了实现这一点，我建议创建一个函数，该函数采用一组元素和您希望设置动画的元素的索引：

function pulsate(elements, index)
{
    if (index < elements.length) {
        elements.eq(index).effect("pulsate", {
            times: 3
        }, 1000, function() {
            pulsate(elements, ++index);
        });
    }
}

然后通过发出以下命令启动序列：

pulsate(jQuery(".transparent"), 0);
于 2012-06-20T10:23:57.873 回答
1

我没有测试过这个，但校长是健全的。

pulsate(jQuery('.transparent').first());    // Call this to pulsate each image sequentially

function pulsate(element)
{
    jQuery(element).effect("pulsate", {times:3}, 1000, function ()
    {
        var _next = $(element).parent().next();
        if (_next.length != 0)
            pulsate(_next.find('.transparent'));
    });
}

您基本上是在使用效果函数上的回调来设置系列中的下一个元素脉动。

于 2012-06-20T10:24:10.840 回答