JQuery是一個JavaScript庫，它可以幫助我們更方便地操作html元素。而animate()函數則是jQuery中一個常用的方法，它可以實現動畫效果。我們來試試如何使用animate()函數在頁面中心放大一個元素。

$(document).ready(function(){
// 首先獲取元素并設置其開始的寬度和高度
var elem = $('.box');
elem.width('50px');
elem.height('50px');
// 監聽元素的點擊事件
elem.on('click', function(){
// 計算元素的新寬度和高度
var width = elem.width() * 2;
var height = elem.height() * 2;
// 計算元素要移動到的位置，即頁面中心
var x = $(document).width() / 2 - elem.width() / 2;
var y = $(document).height() / 2 - elem.height() / 2;
// 使用animate()函數實現動畫效果
elem.animate({
width: width + 'px',
height: height + 'px',
left: x + 'px',
top: y + 'px'
}, 1000);
});
});

在這段代碼中，我們首先獲取要放大的元素并設置其開始的寬度和高度。然后我們監聽元素的點擊事件。當元素被點擊時，我們計算出其新的寬度和高度，并計算出元素要移動到的位置，即頁面的中心。最后，我們使用animate()函數實現動畫效果，讓元素放大并移動到頁面中心。

通過這段代碼，我們可以學到如何使用jQuery的animate()函數實現動畫效果，以及如何計算元素的位置。通過不斷地練習，我們也可以運用animate()函數實現更多酷炫的動畫效果。