Question

我需要将每个图像称为transparent.png pulsate（或fadein，fadeout），依次为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>

Answer 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);

Answer 2

我没有对此进行测试，但校长是合理的。

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'));
    });
}

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

使元素按顺序脉动

2 个答案: