jQuery是一個功能強大的JavaScript庫，擁有豐富的API，其中包含著各種動畫效果。在最近發布的jQuery 3.1.1版本中，可愛的jQuery動畫效果有了更加優秀和強大的表現，下面我們來看看新版jQuery帶來了哪些動畫效果。
首先，我們需要引用最新的jQuery庫，建議使用CDN，可以極大地加速加載速度：
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
我們來看一個例子，這個代碼示例將創建一個簡單的動畫效果，使一個元素上下移動：
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#box").animate({top: '+=50px'}, 500);
});
});
</script>
</head>
<body>
<div id="box" style="background-color:#98bf21;height:100px;width:200px;position:absolute;"></div>
<br><br>
<button>點擊開始動畫</button>
</body>
</html>在這個代碼示例中，我們編寫了一個jQuery函數，使用了元素的animate()方法。該函數將元素的top屬性調整50個像素，動畫效果持續時間為500毫秒。
除了元素移動，jQuery 3.1.1還支持各種動畫效果，包括淡入淡出、滑動、旋轉等等。要想了解更多動畫效果，可以訪問jQuery官網，或者閱讀相關文檔。
上一篇如何用css布置表格