jQuery動(dòng)畫(huà)特效、顯示與隱藏BUG(閃爍)解決方法

jQuery

是一款強(qiáng)大的

JS

庫(kù)，提供了許多動(dòng)態(tài)效果，使用時(shí)還不用考慮兼容性。但是如果你足夠細(xì)心你就會(huì)發(fā)現(xiàn)這樣一種情況：編寫(xiě)代碼時(shí)，需要對(duì)某一元素，當(dāng)鼠標(biāo)移上去就顯示彈出信息，移開(kāi)隱藏信息，你可能會(huì)用

mouseover

和mouseout

結(jié)合

hide()、show()函數(shù)，這種方法沒(méi)有問(wèn)題。但如果你想要更好的效果比如控制顯示隱藏過(guò)程的時(shí)間，此時(shí)如在函數(shù)傳入時(shí)間參數(shù)，你就會(huì)發(fā)現(xiàn)，當(dāng)你在添加了事件的元素上移動(dòng)鼠標(biāo)時(shí)，提示框會(huì)一直閃爍，若隱若現(xiàn)。今天，介紹一種解決辦法。曾經(jīng)為解決這個(gè)

BUG

找遍互聯(lián)網(wǎng)站，未果，無(wú)人提及。留下那種植物特有的清新的味道，那是向著陽(yáng)光的生命力，不是嗎JS

文

件

電

腦

代

碼

編

寫(xiě)

器

示

例

下

載

：baidu/s/1gdvKdFl

原因分析

jQuery

之所以會(huì)產(chǎn)生上面所提到的閃爍問(wèn)題，其根本原因就在于事件被綁定到了同一個(gè)元素上面，這樣鼠標(biāo)在經(jīng)過(guò)的時(shí)候鼠標(biāo)焦點(diǎn)在不斷的變化，瀏覽器無(wú)法準(zhǔn)確具體的判斷鼠標(biāo)所處的位置，從而導(dǎo)致了閃爍問(wèn)題。解決辦法下面兩張是我做的示例，前面的是

JS

效果代碼，后面的是

HTML

代碼。

需要說(shuō)明的是一共用到了四種顯示隱藏show/hide

函

數(shù)

（

傳

參

和

不

傳

參

），fadeIn/fadeOut（傳參和不傳參），fadeTo

同理留下那種植物特有的清新的味道，那是向著陽(yáng)光的生命力，不是嗎就不在贅述。大家可到我提供的地址下載示例。

因?yàn)槭录壎ǖ搅送辉厣喜艜?huì)致使閃爍的情況出現(xiàn)，所以只要我們將事件綁定在不同的元素上即可解決。但要注意的是，綁定到不同的元素上應(yīng)確保元素是塊級(jí)元素或具有塊級(jí)元素的屬性。先看

HTML

代碼，我做了

8

個(gè)

div

分成兩行進(jìn)行效果對(duì)比。在

div

里面每個(gè)都包含一個(gè)隱藏的樣式為hide

的

div（即我說(shuō)的提示框），并分別給了

ID。留下那種植物特有的清新的味道，那是向著陽(yáng)光的生命力，不是嗎上面四個(gè)采用綁定時(shí)間到同一元素；下面四個(gè)則綁定到兩個(gè)元素；接下來(lái)看

JS

代碼，分別和下面的對(duì)應(yīng)。很

明

顯

的

看

到

$(&39;6&39;)

、$(&39;7&39;)、$(&39;8&39;)將事件分開(kāi)了進(jìn)行綁定，mouseover

綁定到本身，mouseout

則綁定到了子元素。

運(yùn)行之后，可以發(fā)現(xiàn)第

6、7、8

個(gè)

div

當(dāng)鼠標(biāo)經(jīng)過(guò)然后移動(dòng)到提示框上面沒(méi)有出現(xiàn)閃爍的情況了。留下那種植物特有的清新的味道，那是向著陽(yáng)光的生命力，不是嗎

說(shuō)明：我做的是簡(jiǎn)單地展示?？梢园l(fā)下在此情況下

678

三個(gè)

div

鼠標(biāo)只有從提示框中移開(kāi)提示框才會(huì)消失。這就是分別綁定事件不足的一個(gè)地方。

如果你想要實(shí)現(xiàn)當(dāng)鼠標(biāo)一出第

678

個(gè)

div

提示框也會(huì)隱藏的效果，你可以在

div

里面在嵌套一個(gè)

div，然后將

mouseout

事件綁定