如何防止懸停動畫從最終消失

我有一個圖像懸停的代碼，它將在懸停時顯示圖像頂部的信息。通過在回調中使用隊列：false，當用戶多次懸停時，我已經停止反覆發射動畫。如何防止懸停動畫從最終消失

我的問題是，如果使用mouseOvering有點瘋狂，淡入/淡出狀態將消除信息的不透明度，直到懸停圖像不再可見爲止。

$('.image').hover(function() { 
    $('.linkWords', this).animate({ 
     opacity: "show" 
    }, { 
     queue: false 
    }); 
}, function() { 
    $('.linkWords', this).animate({ 
     opacity: "hide" 
    }, { 
     queue: false 
    }); 
});

這裏是我的jsfiddle，如果你覺得玩耍。

http://jsfiddle.net/bkbarton/qrprD/

感謝

來源

2011-09-08 bkbarton

開始下一個動畫之前嘗試的元素上.stop(true)。這將終止當前最新的動畫。

來源

2011-09-08 17:28:15 Wulf

沃爾夫 - 你建議我把在第一.animate的.stop（true）還是.hover（）函數中的第二個？我嘗試了兩個，他們沒有解決我的問題。如果用戶在兩個懸停區域之間持續快速移動，懸停圖像仍會消失。 – bkbarton

經過多一點研究後，我發現你是對的。除了添加額外的真實值可以使該效果正常工作。 .stop（true，true）... – bkbarton

那是對的，第一個真正停止當前運行的動畫，第二個真正將它們帶到最終狀態。對於我的動畫來說，最好是阻止它們，但如果它沒有用處，則不會有第二個參數;）如果它對你有幫助，請接受我的答案。 – Wulf

發送不透明度爲1，而不是「顯示」。「顯示」可以使用當前的最大不透明度作爲漸變的不透明度，所以如果漸隱並且當前不透明度爲.5，則它將通過衰減到0.5來顯示它。

$('.image').hover(function() { 
    $('.linkWords', this).animate({ 
     opacity: 1 
    }, { 
     queue: false 
    }); 
}, function() { 
    $('.linkWords', this).animate({ 
     opacity: "hide" 
    }, { 
     queue: false 
    }); 
});

來源

2011-09-08 18:18:48 smdrager

如何防止懸停動畫從最終消失

回答

相關問題