jQuery的鼠標懸停和鼠標移開動畫錯誤

我有一個小鼠標懸停和鼠標移開功能，我必須保持的，而不是CSS（）將鼠標移開功能動畫（）因其他原因jQuery的鼠標懸停和鼠標移開動畫錯誤

問題出現時，我鼠標懸停時的動畫效果，從不透明度1到0仍然像我們用於測試的快速鼠標懸停一樣進行。

我也嘗試過setTimeOut，以便不透明度在需要的時間後歸零。

animate和setTimeOut正在創建相同的問題，在mouserover函數將不透明度更新爲1之後，animate和setTimeOut因爲仍在播放而再次更新爲零。 JSFIDDLE jQuery代碼：

$("#dp-ashish").on("mouseover",function(){ 
    $("#dp-ashish").css("opacity","1"); 
}); 
$("#dp-ashish").on("mouseout",function(){ 
    $("#dp-ashish").animate({"opacity":"0"},1000);   
});

來源

2014-04-12 Sagi_Avinash_Varma

我有一個很難理解的問題。你能否在Jsfiddle中重新創建這個問題？ –

我加入的jsfiddle @JosephDailey –

@RobSedgwick其作品以同樣的方式其沒有阻止生命的戲時，我將鼠標放置 –

你可能要考慮使用任何.stop(true, true)或.finish()（後者只能在jQuery的V1.9及以上）：

$("#dp-ashish").on("mouseover",function(){ 
    $("#dp-ashish").stop(true,true).animate({opacity:1},1000); 
}); 
$("#dp-ashish").on("mouseout",function(){ 
    $("#dp-ashish").stop(true,true).animate({opacity:0},1000);   
});

或：

$("#dp-ashish").on("mouseover",function(){ 
    $("#dp-ashish").finish().animate({opacity:1},1000); 
}); 
$("#dp-ashish").on("mouseout",function(){ 
    $("#dp-ashish").finish().animate({opacity:0},1000);   
});

p/s：opacity及其數字整數值不是ne編輯包裹在引號中。不透明是一個有效的屬性，不需要被解析爲一個字符串，並且其接受的值是不需要作爲字符串傳遞的整數。

或者，您可以切換一個CSS類，讓CSS轉換處理不透明度的變化:)

http://jsfiddle.net/teddyrised/5Ekbf/4/

來源

2014-04-12 14:53:43 Terry

您的jsfiddle本身不工作有時候人是越來越模糊，由於動畫（）如果妳不體驗它，你覺得你是正確的如果在另一臺計算機上檢查 –

如果是這樣的話，當將不透明度更改爲1時，應該使用'.animate（）'。更好的建議是簡單地打開和關閉一個類，使用CSS轉換實現不透明度轉換。瀏覽器的渲染引擎有自己的方式來防止轉換隊列堆疊起來。 – Terry

jQuery的鼠標懸停和鼠標移開動畫錯誤

回答

相關問題