CODEWITHSUNDEEP
jquery
Cudos
Cudos

Reputation: 5894

Make elements pulsate in sequence

I need to make each images called transparent.png pulsate (or fadein, fadeout) 3 times in sequence right after each other not on the same time as it does now.

transparent.png lays on top of each image and gives an fade out effect.

I use:

Here is my code:

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>

Upvotes: 1

Views: 179

Answers (2)

Fr&#233;d&#233;ric Hamidi
Fr&#233;d&#233;ric Hamidi

Reputation: 263077

The usual approach is to chain the next call to effect() in the callback you provide to the current call.

To achieve this, I would suggest creating a function that takes a set of elements and the index of the one you wish to animate:

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

Then initiating the sequence by issuing:

pulsate(jQuery(".transparent"), 0);

Upvotes: 1

Jon
Jon

Reputation: 3213

I haven't tested this but the principal is sound.

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

You're basically using the callback on the effect function to set the next element in the series pulsating.

Upvotes: 1

Related Questions