jQuery中的animate()方法是用來操作元素的動畫效果的。使用animate()方法,可以實現(xiàn)元素在頁面上的移動、尺寸變化、透明度變化等效果。animate()方法的第一個參數(shù)是一個javascript對象,該對象用于定義動畫的目標狀態(tài)。animate()方法的第二個參數(shù)用來定義動畫的時間,單位是毫秒。
$(selector).animate({param1:value1,param2:value2,},speed,callback);
其中,selector是要執(zhí)行動畫的元素的選擇器;param1和param2是要改變的CSS屬性和對應的值;speed是動畫持續(xù)時間;callback是在動畫執(zhí)行完之后要執(zhí)行的函數(shù)。
show()方法是一個用于顯示元素的jQuery方法。當調用show()方法時,元素將被顯示,它的CSS display屬性將從none變?yōu)閎lock。
$(selector).show(speed,callback);
與animate()方法一樣,show()方法也可以有可選的speed和callback參數(shù)。如果speed參數(shù)為0,則show()方法將立即顯示元素。如果callback參數(shù)存在,則在顯示元素后調用該函數(shù)。
使用animate()方法和show()方法可以實現(xiàn)更加復雜的動畫效果。例如,在一個div元素中,當用戶點擊按鈕時,使用立即顯示的show()方法將元素顯示出來,然后使用animate()方法擴展div元素的寬度,并將其從左側移動到右側。
$("#btn").click(function(){ $("#box").show(0,function(){ $(this).animate({ width: "500px", left: "500px" }, 1000); }); });
這個代碼使用了jQuery的點擊事件處理程序,當用戶點擊按鈕時,首先使用show()方法顯示了一個帶有id屬性為box的元素。然后,使用animate()方法將元素從原來的位置擴展至右側,并將寬度擴展到500像素。動畫持續(xù)時間為1000毫秒。