jquery是一個(gè)非常流行的JavaScript庫(kù),它為我們提供了各種方便的功能,其中包括圖片淡入淡出效果。
$(document).ready(function(){ $("#fade").fadeIn(1000); $("#fade").fadeOut(1000); });
上面的代碼是實(shí)現(xiàn)圖片淡入淡出效果的jQuery代碼,其中#fade代表要進(jìn)行淡入淡出效果的圖片。fadeIn(1000)表示淡入的時(shí)間為1秒,fadeOut(1000)則表示淡出的時(shí)間也為1秒。
我們也可以使用delay()方法,來(lái)使圖片在顯示一段時(shí)間后再進(jìn)行淡出效果:
$(document).ready(function(){ $("#fade").fadeIn(1000).delay(2000).fadeOut(1000); });
上面的代碼中delay(2000)表示要延遲2秒鐘后才進(jìn)行淡出效果。
如果我們希望圖片在鼠標(biāo)懸停時(shí)停止淡入淡出效果,可以使用hover()方法:
$(document).ready(function(){ $("#fade").hover(function(){ $(this).stop().fadeOut(1000); }, function(){ $(this).stop().fadeIn(1000); }); });
上面的代碼中,hover()方法接收兩個(gè)函數(shù)作為參數(shù),第一個(gè)函數(shù)表示當(dāng)鼠標(biāo)懸停在圖片上時(shí)所執(zhí)行的操作,第二個(gè)函數(shù)則表示當(dāng)鼠標(biāo)移開(kāi)時(shí)所執(zhí)行的操作。stop()方法用來(lái)停止當(dāng)前正在進(jìn)行的動(dòng)畫(huà)效果,避免出現(xiàn)混亂的情況。
總之,使用jQuery實(shí)現(xiàn)圖片淡入淡出效果非常簡(jiǎn)單,只需要使用fadeIn()和fadeOut()方法,并結(jié)合其他的特效方法,就可以輕松實(shí)現(xiàn)很多動(dòng)態(tài)效果。