2
我在搜索了很多關於這篇文章標題的指南或問題之後。但我沒有找到任何好的答案，所以我決定創建一個我自己的並分享結果。我仍然需要一些指導來使這個效果更好。懸停，影響其他元素並顯示背景圖片
請注意，我是新來的Stackoverflow和新的jQuery。
我想對我的投資組合鏈接有一個很好的效果。我想在鏈接懸停時實現的效果如下：
- 您懸停的鏈接應改變顏色。
- div中的所有其他鏈接都應該減少不透明度，以增加您懸停的鏈接的焦點。
- 當懸停在鏈接上時，背景圖像將淡入淡出。
例子：
我已經創建了一個的jsfiddle在那裏你可以本身的結果。
問題：
如果你將鼠標懸停在鏈接幾次jQuery的功能發揮出來。我需要停止腳本 - 我該怎麼做？
有沒有辦法將此代碼寫得更聰明/更好地提高網站的性能？還是我在正確的軌道上？
這裏是jQuery代碼：
// When hovering on class .nr-1, #section-1 will fadeIn children div .bg-1 - and so on.
$(".nr-1").hover(function() {
$("#section-1").children(".bg-1").fadeIn(500);
}, function() {
$("#section-1").children(".bg-1").fadeOut(500);
});
$(".nr-2").hover(function() {
$("#section-1").children(".bg-2").fadeIn(500);
}, function() {
$("#section-1").children(".bg-2").fadeOut(500);
});
// When hovering a link in all the <a> tags will get the class "bla"
$(function() {
$('.hover-link .nav-1 a').on('mouseenter mouseleave', function() {
$('.hover-link .nav-1 a').toggleClass('bla');
});
});
// The link you hover over will gett a class new.
$('.hover-link .nav-1 a').hover(function() {
$(this).addClass("new");
},
function() {
$(this).removeClass('new');
});
有一個偉大的一天！
UPDATE
感謝您對所有的答案。讓效果好用的最佳方法是@Redet Getachew答案。
這裏是我更新的版本我Codepen！
_「如果你將鼠標懸停在鏈接幾次jQuery的功能發揮出來。我需要停止腳本」 _哪個部分的動畫應該停止？ '.fadeOut（）'，'.fadeIn（）'？ – guest271314
我認爲第一個函數需要停止 - '.fadeOut（）'和'.fadeIn（）'。如果您將鏈接快速懸停幾次，您會看到圖像會隨着您的徘徊而多次切換。 – hakanfilip