jQuery 提供了一個簡單定時器方法,可以用來控制元素的動態效果。方法如下:
setInterval(function(){ // 在這里編寫你要執行的代碼 }, 1000);
上面的代碼中,第一個參數是一個函數,可以在該函數中編寫你想要執行的代碼。第二個參數是時間間隔,單位是毫秒。
使用定時器方法可以制作一些簡單而有趣的動畫效果,例如:鼠標移入圖片時圖片會縮小,鼠標移出圖片時圖片會放大。代碼如下:
$("img").hover(function(){ $(this).animate({width: "50%"}, 300); }, function(){ $(this).animate({width: "100%"}, 300); });
上面的代碼中,用到了 jQuery 的動畫方法 animate(),在鼠標移入和移出時分別縮小和放大圖片。
定時器方法還可以用來輪播圖片、滾動新聞等常見功能。代碼如下:
var index = 0; var len = $("img").length; setInterval(function(){ $("img").eq(index).fadeOut(500); index = (index + 1) % len; $("img").eq(index).fadeIn(500); }, 3000);
上面的代碼中,定義了一個變量 index 用來記錄當前顯示的圖片序號,len 表示圖片總數。定時器方法每 3 秒執行一次,將當前圖片淡出,然后將 index 增加 1,再將下一張圖片淡入。
簡單定時器是 jQuery 中常見的一種方法,可以應用于眾多場景,對頁面優化非常有幫助。