JQuery animate是JQuery中很重要的一個函數，它可以實現動畫效果，讓頁面更加生動有趣。下面我們來介紹如何使用JQuery animate實現一個滾動公告。

// HTML代碼
<div id="notice">
<ul>
<li>這是第一條公告</li>
<li>這是第二條公告</li>
<li>這是第三條公告</li>
</ul>
</div>
// CSS代碼
#notice {
height: 50px;
overflow: hidden;
}
#notice ul {
margin: 0;
padding: 0;
list-style: none;
}
#notice li {
height: 25px;
line-height: 25px;
}
// JS代碼
function noticeScroll() {
setInterval(function() {
var li = $('#notice ul li:first-child');
var liHeight = li.height();
li.animate({ marginTop: -liHeight + 'px' }, 1000, function() {
li.appendTo('#notice ul').css('marginTop', 0);
});
}, 2000);
}
noticeScroll();

首先，我們在HTML中創建一個div，將所有公告都放在一個ul中，并將div的高度設置為50像素，并將overflow屬性設置為hidden，這樣可以隱藏超出div高度的內容。然后，為了讓公告豎直排列，我們將li的高度設置為25像素，并將line-height屬性設置為25像素。

在JS代碼中，我們先定義了一個noticeScroll函數，它使用了setInterval函數，每2秒鐘執行一次。在函數內部，我們首先獲取ul中第一個li元素，并獲取其高度。然后，使用animate函數讓這個li元素向上移動一個li元素的高度，并在1000毫秒內完成動畫效果。最后，在動畫結束后，我們將這個li元素移到ul的尾部，并將marginTop屬性設置為0，以準備下一次操作。

這樣，我們就實現了一個簡單的滾動公告。通過JQuery animate函數，我們可以輕松實現各種動畫效果，讓網頁更加生動有趣。