JQuery animate是JQuery中很重要的一個(gè)函數(shù)，它可以實(shí)現(xiàn)動(dòng)畫(huà)效果，讓頁(yè)面更加生動(dòng)有趣。下面我們來(lái)介紹如何使用JQuery animate實(shí)現(xiàn)一個(gè)滾動(dòng)公告。

// 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();

首先，我們?cè)贖TML中創(chuàng)建一個(gè)div，將所有公告都放在一個(gè)ul中，并將div的高度設(shè)置為50像素，并將overflow屬性設(shè)置為hidden，這樣可以隱藏超出div高度的內(nèi)容。然后，為了讓公告豎直排列，我們將li的高度設(shè)置為25像素，并將line-height屬性設(shè)置為25像素。

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

這樣，我們就實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的滾動(dòng)公告。通過(guò)JQuery animate函數(shù)，我們可以輕松實(shí)現(xiàn)各種動(dòng)畫(huà)效果，讓網(wǎng)頁(yè)更加生動(dòng)有趣。