Question

div {
        position: relative;
        width: 100px;
        height: 100px;
        margin-bottom: 20px;
    }
<div class="first" style="background:#DC143C;">
</div>
<br>
<div class="second" style="background:#CD5C5C;">
</div>
<br>
<div class="third" style="background:#FF69B4;">
</div>
<br>
<div class="fourth" style="background:#FF7F50;">
</div>
<script>
    $(document).ready(function(){
        $("class").click(function(){
            $(".first").animate({
                left: '250px'
            });
        });

    $(".third").mouseover(function(){
        $(this).animate().css({
            backgroundColor: '#FFF552'
        });
    })

    $(".first").click(function(){
        $(this).animate({
            width: 300
        })
    });
});
</script>

我完成了这个应用程序，并使其无需按钮即可运行。但是现在我需要让这四个物体同时移动。我不知道如何制作它。

Answer 1

有很多方法可以让div动画，我会把这个练习留给你。在这种情况下，您所要做的就是正确连接事件，有很多方法可以做到这一点。请查看以下fiddle。可能完全符合您的需求，但它可能会让您有所了解。

另请参阅以下方法，了解其工作原理。

setInterval
setTimeout

同时移动物体

1 个答案: