元素列表上的随机不透明度动画

Question

我到处找，找不到正确的方法，希望有人能在这里提供帮助。

参考图片： http://theintegrateur.com/grid.jpg

我想要做的是“.clients-overlay”跨度上的动画，这样当页面加载随机元素的覆盖时，不透明度为 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

编辑循环函数

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