JQuery中的animate()函數(shù)是一種用于創(chuàng)建動(dòng)畫效果的方法。它可以使用多種參數(shù)來定義一個(gè)或多個(gè)屬性的動(dòng)畫，包括旋轉(zhuǎn)方向、角度和速度。

$("button").click(function(){
$("#box").animate({deg: 180}, {
duration: 2000,
step: function(now){
$(this).css({
transform: "rotate(" + now + "deg)"
});
}
});
});

在上面的代碼中，我們給按鈕添加了一個(gè)click事件，并給box添加了旋轉(zhuǎn)動(dòng)畫。我們?cè)O(shè)置了目標(biāo)旋轉(zhuǎn)角度為180度，動(dòng)畫的持續(xù)時(shí)間為2秒。為了使旋轉(zhuǎn)效果更加流暢，我們?cè)赼nimate()函數(shù)中添加了step回調(diào)函數(shù)，它將在每一步動(dòng)畫完成后執(zhí)行。在這個(gè)回調(diào)函數(shù)中，我們使用css()方法來旋轉(zhuǎn)box元素。

現(xiàn)在，當(dāng)我們點(diǎn)擊按鈕時(shí)，會(huì)看到box元素在中心旋轉(zhuǎn)180度。

然而，上面的代碼存在一個(gè)問題，即由于animate()函數(shù)不能直接操作角度，因此我們需要使用deg參數(shù)來跟蹤角度。這個(gè)參數(shù)不是JQuery自帶的，需要手動(dòng)添加：

jQuery.fn.extend({
rotate: function(degrees) {
$(this).css({'transform' : 'rotate('+ degrees +'deg)'});
return $(this);
}
});

在上面的代碼中，我們自定義了一個(gè)rotate()函數(shù)來實(shí)現(xiàn)旋轉(zhuǎn)效果。現(xiàn)在，我們就可以使用rotate()函數(shù)來取代css()方法了：

$("button").click(function(){
$("#box").animate({deg: 180}, {
duration: 2000,
step: function(now){
$(this).rotate(now);
}
});
});

這個(gè)函數(shù)同時(shí)可以實(shí)現(xiàn)多個(gè)屬性的動(dòng)畫效果。例如，如果我們要同時(shí)實(shí)現(xiàn)旋轉(zhuǎn)和放大的效果，我們可以這樣做：

$("#box").animate({
deg: 180,
scaleX: 1.5,
scaleY: 1.5
}, {
duration: 2000,
step: function(now){
$(this).css({
transform: "rotate(" + now.deg + "deg) scaleX(" + now.scaleX + ") scaleY(" + now.scaleY + ")"
});
}
});

在上面的代碼中，我們添加了scaleX和scaleY兩個(gè)屬性代表水平和垂直方向的放大倍數(shù)。在step回調(diào)函數(shù)中，我們通過設(shè)置transform屬性來同時(shí)控制旋轉(zhuǎn)和放大效果。

通過使用JQuery的animate()函數(shù)，我們可以輕松實(shí)現(xiàn)各種動(dòng)畫效果，包括旋轉(zhuǎn)。記住，在定義動(dòng)畫效果時(shí)，要將核心代碼放在step回調(diào)函數(shù)中，以確保動(dòng)畫的流暢度和準(zhǔn)確性。