使元素脈動序列

Question

我需要按順序將每個圖像稱爲transparent.png pulsate（或淡入淡出），依次排列3次，與現在不同。

transparent.png位於每張圖片的頂部，並提供淡出效果。

我用：

• 的jQuery 1.7.2
• jQuery UI的21年1月8日

這裏是我的代碼：

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

你基本上是使用效果函數的回調來設置脈動序列中的下一個元素。