Случайная анимация непрозрачности по списку элементов

Question

Я искал всюду и не могу найти правильный способ сделать это, надеюсь, кто-то сможет здесь помочь.

Ссылка Изображение: http://theintegrateur.com/grid.jpg

То, что я хочу сделать, это анимация на «.clients-наложению» диапазон так, чтобы при загрузке страницы наложения случайного элемента имеет непрозрачность 0 в течение 4 секунд, а затем возвращается к 0,7. Затем одна и та же анимация происходит со случайным элементом в списке.

<ul id="clients-list" class="group"> 
     <li> 
      <span class="clients-overlay">&nbsp;</span> 
      <span><img src="img/logo-client.jpg" alt="Client" title="Client" /></span> 
     </li> 
     <li> 
      <span class="clients-overlay">&nbsp;</span> 
      <span><img src="img/logo-client.jpg" alt="Client" title="Client" /></span> 
     </li> 
     <li> 
      <span class="clients-overlay">&nbsp;</span> 
      <span><img src="img/logo-client.jpg" alt="Client" title="Client" /></span> 
     </li> 
     <li> 
      <span class="clients-overlay">&nbsp;</span> 
      <span><img src="img/logo-client.jpg" alt="Client" title="Client" /></span> 
     </li> 
    </ul> 

Answer 1

Edit в цикле функция

Updated demo

Для цикла это, вы можете просто положить его в функцию и он называет себя, как так

function changeOverlay() { 
    var randomNum = Math.round(Math.random() * 4) - 1; 
    $('.clients-overlay:eq(' + randomNum + ')').animate({ "opacity" : .4 }); 
    setTimeout(function() { 
     $('.clients-overlay:eq(' + randomNum + ')').animate({ "opacity" : .7 }); 
     changeOverlay(); 
    }, 4000); 
} 

$(document).ready(function() { 
    changeOverlay(); 
});