Сделать элементы пульсировать последовательно

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

Вы в основном используете обратный вызов функции эффекта для установки следующего элемента в пульсации серии.