以下是一个简单的基于jQuery的动画效果代码示例。这段代码将使一个具有特定ID的元素（例如`#myDiv`）在页面上平滑地移动到页面的右侧，并同时改变其背景色。
<!DOCTYPE html>
<html>
<head>
<title>jQuery 动画示例</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
#myDiv {
width: 100px;
height: 100px;
background-color: red;
position: relative;
}
</style>
</head>
<body>
<div id="myDiv"></div>
<button id="animateButton">开始动画</button>
<script>
$(document).ready(function(){
$("#animateButton").click(function(){
$("#myDiv").animate({
left: '250px', // 向右移动250px
backgroundColor: 'blue' // 改变背景色为蓝色
}, 1000, function() {
// 动画完成后的回调函数
alert('动画完成！');
});
});
});
</script>
</body>
</html>
在这个示例中，我们首先引入了jQuery库。然后，定义了一个ID为`myDiv`的`div`元素，并为其设置了一些基本样式（包括宽度、高度、背景色和相对定位）。我们还添加了一个按钮，用于触发动画。
当用户点击该按钮时，会触发一个事件处理器，该处理器使用`animate()`函数使`#myDiv`元素向右移动250像素，并改变其背景色为蓝色。`animate()`函数的第一个参数是一个对象，指定了动画结束时元素应具有的CSS属性。第二个参数是动画持续时间（以毫秒为单位），这里设置为1000毫秒（即1秒）。第三个参数是一个回调函数，它在动画完成后执行，这里用来显示一个提示框。