jQuery鼠標懸停鼠標不透明

Question

function hoverOpacity() { 
    $('#fruit').mouseover(function() { 
     $(this).animate({opacity: 0.5}, 1500); 
     }); 
    $('#fruit').mouseout(function() { 
     $(this).animate({opacity: 1}, 1500); 
     }); 
} 

這是我的功能，動畫div#fruit，它它的工作。

問題是這樣的;當您在mousein動畫完成之前mouseout時，它必須在開始mouseout之前完成動畫。 （希望有道理）

這通常不明顯，但持續時間很長，這是顯而易見的。

我不想完成動畫，而是要停止動畫並將其轉換回原始狀態。

Answer 1

試試這個：

function hoverOpacity() { 
    $('#fruit').mouseover(function() { 
     $(this).stop(true, true).animate({opacity: 0.5}, 1500); 
     }); 
    $('#fruit').mouseout(function() { 
     $(this).stop(true, true).animate({opacity: 1}, 1500); 
     }); 
} 

這應該停止動畫，清除隊列（第一個參數），並跳轉到結束（第二ARG），你可以用參數適當改變周圍/一塌糊塗。

Answer 2

您需要添加一個調用.stop()您動畫之前清除當前和任何排隊的動畫：

function hoverOpacity() { 
    $('#fruit').mouseover(function() { 
     $(this).stop(true).animate({opacity: 0.5}, 1500); 
     }); 
    $('#fruit').mouseout(function() { 
     $(this).stop(true).animate({opacity: 1}, 1500); 
     }); 
} 

Answer 3

您正在尋找的stop功能，可能還跟着show（或hide，或css ，取決於你想要什麼狀態opacity結束）。

function hoverOpacity() { 
    $('#fruit').mouseover(function() { 
     $(this).stop(true).animate({opacity: 0.5}, 1500); 
     }); 
    $('#fruit').mouseout(function() { 
     $(this).stop(true).animate({opacity: 1}, 1500); 
     }); 
} 

該true告訴動畫跳轉到最後。如果這是該元素上唯一的動畫，則應該沒問題;否則，如我所說，你可以看看css明確設置所需的不透明度。

另外，雖然，你可能看使用mouseenter和mouseleave而不是mouseover和mouseout，原因有二：1，mouseover重複橫跨該元素的鼠標移動，和2都mouseover和mouseout泡沫和所以如果你的「水果」元素有子元素，你也會接收到它們的事件，這往往會破壞這種動畫的穩定性。

Answer 4

試試這個藏漢：

function hoverOpacity() { 
    $('#fruit').hover(function() { 
     $(this).animate({opacity: 0.5}, 1500); 
    }, function() { 
     $(this).animate({opacity: 1}, 1500); 
    }); 
}