jQuery教程：实现简单的动画效果

在这个教程中，我们将使用jQuery来实现一个简单的动画效果。我们将创建一个红色的方块，然后让它上下移动。

HTML结构

首先，我们需要一个HTML结构来包含我们的方块。

CSS样式

接下来，我们需要为方块添加一些样式。

jQuery代码

现在，我们将使用jQuery来创建动画效果。

开始动画

$(document).ready(function() {
var box = $(‘.box’);
var position = 0;

function moveBox() {
position += 10;
if (position >= 300) {
position = 0;
}
box.css(‘top’, position + ‘px’);
}

function startAnimation() {
box.animate({
top: ‘300px’
}, 2000, ‘linear’, function() {
moveBox();
});
}

setInterval(moveBox, 30);
});