jQuery中的addClass()方法可以用于給元素添加CSS類。在某些情況下,我們可能需要給元素添加類的同時延遲一段時間,可以使用以下代碼:
$('selector').delay(1000).queue(function(){ $(this).addClass('classname'); $(this).dequeue(); });
以上代碼中,delay()方法用于延遲1秒鐘,queue()方法用于定義一個動畫隊(duì)列,該隊(duì)列中包含添加類的動畫,dequeue()方法用于彈出類似于隊(duì)列的首個函數(shù)。
$('selector').addClass('classname').delay(1000).queue(function(){ $(this).removeClass('classname'); $(this).dequeue(); });
如果需要添加類后延遲一段時間再移除,則可以使用以上代碼。該代碼中先添加類,然后延遲1秒鐘,在隊(duì)列中定義一個函數(shù)用于移除類,最后彈出函數(shù)。
使用addClass()方法有一個常見的錯誤是在快速點(diǎn)擊時可能會導(dǎo)致類名重復(fù)添加,此時可以使用一個flag變量來解決:
var flag = true; $('selector').click(function(){ if(flag){ $(this).addClass('classname'); flag = false; setTimeout(function(){ flag = true; },1000); } });
以上代碼中,在每次點(diǎn)擊時先檢查flag變量是否為true,如果是,則執(zhí)行添加類的操作,同時將flag變量修改為false。然后使用setTimeout()方法在1秒鐘后將flag變量修改為true,從而達(dá)到可以再次添加類的效果。