Question

我发现这个网站非常棒。我一直在研究如何使用jQuery和CSS3来制作动画。

这是网站：SIDIGITAL

基本思想是他们有一组连接的div。每个div都有自己的绝对位置值，如顶部，左侧相对于其父级，还有自己的宽度和高度。这就是它的样子

<div class="wrapper">
    <div class="tube1"><div class="water"></div></div>
    <div class="tube2"><div class="water"></div></div>
    <div class="tube3"><div class="water"></div></div>
</div>

你可以看到另外一个div与班级＆＃34; water＆＃34;在每个div里面。我尝试设置＆＃34; water＆＃34;的宽度。 div从0％到100％让人感觉水就像5000毫秒一样流过管子

$(document).ready(function() {
    $('.pipe1 .water').animate({
        width: "100%"
    }, 5000);
});

if('.pipe1 .water').width() = "100%") {
    $('.pipe2 .water').animate({
        width: "100%"
    }, 5000);
}

我希望一旦水元素的宽度为100％，第二管中的水流动，然后管3中的水。

当前解决方案仅适用于第一个元素，即tube1。

无论如何要实现这个目标吗？

如何使用animate（）为多个元素的宽度设置动画

0 个答案: