jquery將鼠標移出的圖標恢復爲鼠標移動之前的值

我有這段代碼會將一些圖標淡化到mouseenter上的opacity 1.0，並在mouseleave上返回0.3。它的效果很好，除非我已經在不同的響應視圖中將這些圖標設置爲不透明度0.13，但下面的代碼仍然會將它們淡出爲0.13而不是0.13，這不是我想要的。jquery將鼠標移出的圖標恢復爲鼠標移動之前的值

$(".social-holder img").on("hover", function(e) { 
    if(e.type == "mouseenter") { 
     $(this).fadeTo('fast', 1.0); 
    } 
    else if (e.type == "mouseleave") { 
     $(this).fadeTo('fast', 0.3); 
    } 
});

我試了下面的代碼，我不明白爲什麼它不會工作。它的葉子圖標1.0鼠標離開

$(".social-holder img").on("hover", function(e) { 
    var currentOpacity = $(this).css('opacity'); 
    if(e.type == "mouseenter") { 
     $(this).fadeTo('fast', 1.0); 
    } 
    else if (e.type == "mouseleave") { 
     $(this).fadeTo('fast', currentOpacity); 
    } 
});

通過VAR currentOpacity似乎做工精細，我與控制檯檢查的方式，但它似乎不進去的else if語句。也許我對範圍或某事有一些誤解。

來源

2013-01-23 byronyasgur

您是否嘗試添加一些'console.log'消息來查看這些事件何時被觸發？這可能是你的'mouseleave'和'mouseenter'動畫互相重疊和/或你的其他動畫。 – Kyle

是的，我已經嘗試過他們幾乎到處都是，但我仍然不能看到問題 – byronyasgur

您的代碼不起作用，因爲每次調用處理函數時，currentOpacity都會發生更改。所以，當鼠標離開，該代碼被執行：

var currentOpacity = $(this).css('opacity'); 
$(this).fadeTo('fast', currentOpacity);

這是什麼也不做:-)

使用此代碼，而不是一個複雜的方式：

if(e.type == "mouseenter") { 
    // Either preserve the saved value or get current opacity 
    var origOpacity = $(this).data('origOpacity') || $(this).css('opacity'); 
    $(this).fadeTo('fast', 1.0).data('origOpacity', origOpacity); 
} 
else if (e.type == "mouseleave") { 
    var origOpacity = $(this).data('origOpacity'); 
    $(this).fadeTo('fast', origOpacity, function(){ $(this).removeAttr('style'); }); 
}

這節省了輸入的不透明度在元素的數據映射中並從那裏獲取它。

來源

2013-01-23 17:24:54

謝謝...是的，這有效，但對我來說並不是很好。這是一個快速響應的主題，當窗口被某人調整大小時，之前懸停在圖標上的任何內容都會因爲某種原因而忽略了css ......我知道它應該只在一個視圖中使用，但它可能會在瀏覽器中調整大小原因......我從來沒有聽說過data（）函數......有沒有辦法讓它丟棄它的內容或其他東西。在我說話的時候，在aery api上。 – byronyasgur

問題是，你不總是得到一個mouseleave，但這不是一個問題。在mouseenter中使用此代碼：'var origOpacity = $（this）.data（'origOpacity'）|| $（this）.css（'opacity'）;' –

通過這個修復，啓動不透明度被保存在'data（）'中，並且這總是首選的，無論動畫的哪個階段被中斷。 –

jquery將鼠標移出的圖標恢復爲鼠標移動之前的值

回答

相關問題