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

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

1 个答案: