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