jQuery是一個非常流行的JavaScript庫，它的操作簡單，功能非常強大。其中一個非常常用的功能是設置顏色漸變效果。下面我們就來看一下如何使用jQuery來實現。
$(document).ready(function(){
$("button").click(function(){
$("div").animate({backgroundColor: "#FF5733"}, "slow");
});
});在上面的代碼中，我們使用了jQuery中的animate()函數，它可以讓我們實現動態效果。具體來說，我們使用animate()函數來實現顏色漸變效果。animation()函數包含兩個參數，第一個參數是要指定的屬性，這里指定的是backgroundColor，也就是色塊的背景顏色。第二個參數是時間，這里使用的是"slow"，表示動畫過程會比較緩慢。
在上面的代碼中，我們還使用了click()函數，它會在按鈕被點擊時調用代碼中的函數。這里的按鈕可以是任何類型的HTML元素，只需要選定對應的元素就可以了。
最后，我們來看一下效果。設置好代碼后，我們運行頁面，并點擊對應的按鈕，就可以看到漸變的效果。
<!DOCTYPE html>
<html>
<head>
<title>jQuery Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div style="background-color:#00FF00;height:100px;width:100px;"></div>
<br>
<button>Click to change color</button>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({backgroundColor: "#FF5733"}, "slow");
});
});
</script>
</body>
</html>下一篇css div 橫排列