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

jQuery

是一款強大的

JS

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

mouseover

和mouseout

結(jié)合

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

BUG

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

文

件

電

腦

代

碼

編

寫

器

示

例

下

載

：baidu/s/1gdvKdFl

原因分析

jQuery

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

JS

效果代碼，后面的是

HTML

代碼。

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

函

數(shù)

（

傳

參

和

不

傳

參

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

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

因為事件綁定到了同一元素上才會致使閃爍的情況出現(xiàn)，所以只要我們將事件綁定在不同的元素上即可解決。但要注意的是，綁定到不同的元素上應(yīng)確保元素是塊級元素或具有塊級元素的屬性。先看

HTML

代碼，我做了

8

個

div

分成兩行進行效果對比。在

div

里面每個都包含一個隱藏的樣式為hide

的

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

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

JS

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

明

顯

的

看

到

$(&39;6&39;)

、$(&39;7&39;)、$(&39;8&39;)將事件分開了進行綁定，mouseover

綁定到本身，mouseout

則綁定到了子元素。

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

6、7、8

個

div

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

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

678

三個

div

鼠標只有從提示框中移開提示框才會消失。這就是分別綁定事件不足的一個地方。

如果你想要實現(xiàn)當鼠標一出第

678

個

div

提示框也會隱藏的效果，你可以在

div

里面在嵌套一個

div，然后將

mouseout

事件綁定