jQuery是目前最流行的JavaScript庫，它能幫助我們更加方便地操作DOM和處理事件。在這篇文章中，我們將使用jQuery來讓圓形的div向下動。
<!DOCTYPE html>
<html>
<head>
<title>使用jQuery讓圓形div向下動</title>
<style>
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: red;
position: absolute;
left: 50%;
margin-left: -50px;
top: 0;
}
</style>
</head>
<body>
<div class="circle"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
setInterval(function() {
$(".circle").animate({top: "+=50px"}, 1000);
}, 2000);
});
</script>
</body>
</html>在上面的代碼中，我們首先創(chuàng)建了一個圓形的div并設(shè)置了它的樣式。我們使用了position: absolute和left: 50%以及margin-left: -50px來讓它水平居中。我們還將它的top屬性設(shè)置為0，因?yàn)槲覀兿胱屗鼜拇翱陧敳块_始向下動。
接下來，我們在頁面底部引入了jQuery庫，并在一個document.ready函數(shù)中注冊了一個interval，間隔為2秒。在每次interval觸發(fā)時，我們使用jQuery的animate函數(shù)來讓圓形div向下移動50個像素，用時1秒。這樣，我們就創(chuàng)建了一個讓圓形div向下動的動畫效果。
總之，使用jQuery讓圓形div向下動非常簡單，并且使用animate函數(shù)可以讓我們創(chuàng)建更多復(fù)雜的動畫效果。希望本文對你有所幫助。