首頁 > 網際網路

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

2019-12-12 21:13:50

jQuery是一款強大的JS庫,提供了許多動態效果,使用時還不用考慮相容性。但是如果你足夠細心你就會發現這樣一種情況:編寫程式碼時,需要對某一元素,當滑鼠移上去就顯示彈出資訊,移開隱藏資訊,你可能會用mouseover和mouseout結合hide()、show()函數,這種方法沒有問題。但如果你想要更好的效果比如控制顯示隱藏過程的時間,此時如在函數傳入時間引數,你就會發現,當你在新增了事件的元素上移動滑鼠時,提示框會一直閃爍,若隱若現。今天,小編介紹一種解決辦法。

小編曾經為解決這個BUG找遍網際網路站,未果,無人提及。

1

jQuery之所以會產生上面所提到的閃爍問題,其根本原因就在於事件被系結到了同一個元素上面,這樣滑鼠在經過的時候滑鼠焦點在不斷的變化,瀏覽器無法準確具體的判斷滑鼠所處的位置,從而導致了閃爍問題。


1

下面兩張圖片是我做的範例圖片,前面的是JS效果程式碼,後面的是HTML程式碼。

需要說明的是一共用到了四種顯示隱藏show/hide函數(傳參和不傳參),fadeIn/fadeOut(傳參和不傳參),fadeTo同理就不在贅述。

大家可到我提供的地址下載範例。



2

因為事件係結到了同一元素上才會致使閃爍的情況出現,所以只要我們將事件係結在不同的元素上即可解決。但要注意的是,係結到不同的元素上應確保元素是塊級元素或具有塊級元素的屬性。

先看HTML程式碼,我做了8個div分成兩行進行效果對比。

在div裡面每個都包含一個隱藏的樣式為hide的div(即我說的提示框),並分別給了ID。

上面四個採用系結時間到同一元素;

下面四個則係結到兩個元素;



3

接下來看JS程式碼,

分別和下面的對應。

很明顯的看到$('#6')、$('#7')、$('#8')將事件分開了進行系結,mouseover系結到本身,mouseout則係結到了子元素。


4

執行之後,可以發現第6、7、8個div當滑鼠經過然後移動到提示框上面沒有出現閃爍的情況了。

5

說明:我做的是簡單地展示。可以發下在此情況下678三個div滑鼠只有從提示框中移開提示框才會消失。這就是分別系結事件不足的一個地方。如果你想要實現當滑鼠一出第678個div提示框也會隱藏的效果,你可以在div裡面在巢狀一個div,然後將mouseout事件係結到新巢狀的div上面即可解決。

IT145.com E-mail:sddin#qq.com