Question

我一直在搜索一篇类似于这篇文章标题的指南或问题之后。但我没有找到任何好的答案所以我决定创建一个我自己的并分享结果。我仍然需要一些指导来使这种效果更好。

请注意我是Stackoverflow的新手，是jQuery的新手。

我希望对我的投资组合链接有一个很好看的效果。悬停在链接上时我希望实现的效果如下：

您悬停的链接应更改颜色。
div中的所有其他链接应该降低不透明度，以增加您正在悬停的链接的焦点。
当鼠标悬停在链接上时，背景图像会淡入淡出。

示例：

我已经创建了一个Jsfiddle，您可以在其中查看结果。

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');
  });

祝你有美好的一天！

更新

感谢您的所有答案。让效果更好的最佳方法是@Redet Getachew回答。

这是i Codepen的更新版本！

Codepen

Answer 1

您可以使用.stop()

$(".nr-1").hover(function() {
  $("#section-1").children(".bg-1").stop(true, true).fadeIn(500);
}, function() {
  $("#section-1").children(".bg-1").stop(true, true).fadeOut(500);
});

$(".nr-2").hover(function() {
  $("#section-1").children(".bg-2").stop(true, true).fadeIn(500);
}, function() {
  $("#section-1").children(".bg-2").stop(true,true).fadeOut(500);
});

jsfiddle http://jsfiddle.net/9xrgqdk7/1/

Answer 2

您可以使用css3转换而不是jquery淡入淡出方法。将图像放在链接旁边并使用脉冲（+）css选择器来影响它们的属性。这可能会提高性能。请参阅以下链接。 How to affect other elements when a div is hovered

＆＃13;

/* remove this one
$(".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);
});
*/
// All the other links in the div should reduce opacity.

$(function() {
  $('.hover-link .nav-1 a').on('mouseenter mouseleave', function() {
    $('.hover-link .nav-1 a').toggleClass('bla');
  });
});

// Effect: The link you hover, changes color.

$('.hover-link .nav-1 a').hover(function() {
    $(this).addClass("new");
  },
  function() {
    $(this).removeClass('new');
  });

＆＃13;

@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700);
/*affect .bg-1 when hovered over .nr-1 */
.nr-1:hover + .bg-1,.nr-2:hover + .bg-2{
  opacity:8.0;
}

/* General */
body {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.flexboxcenter {
  display: flex;
  justify-content: center;
  align-items: center;
}

.section-1 {
  width: 100%;
  height: 100vh;
  display: block;
  position: relative;
}

.hover-link {
  height: 500px;
  width: 100%;
  z-index: 100000;
}

.hover-link .nav-1 {
  z-index: 10000;
}

.hover-link .nav-1 a {
  text-align: center;
  display: block;
  font-family: 'Droid Serif', serif;
  text-decoration: none;
  color: black;
  font-size: 50px;
  letter-spacing: 1px;
  padding: 10px;
  transition: all 500ms ease-in-out;
}

/* Background classes */

.bg-1 {
  position: absolute;
  top: 0px;
  left: 0px;
	background: url('https://images.unsplash.com/photo-1432821596592-e2c18b78144f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=3f9c78df0edb464244bbabb04d1797d8') center center no-repeat;
  background-size: cover;
	height: 100vh;
	width: 100%;
	z-index: -1;
  opacity: 0.0;
  -webkit-transition-property:opacity;
  transition-property: opacity;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;

}

.bg-2 {
  position: absolute;
  top: 0px;
  left: 0px;
  background: url('https://images.unsplash.com/photo-1421757295538-9c80958e75b0?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=3628f27cd5768ece147877e2dd792c6c') center center no-repeat;
  background-size: cover;
	height: 100vh;
	width: 100%;
	z-index: -1;
	opacity: 0.0;
  -webkit-transition-property:opacity;
  transition-property: opacity;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

/* Hover effect classes */

.new {
  color: #EE6F60 !important;
  opacity: 1 !important;
}

.bla {
  opacity: 0.3;
}

/* Hover Effect Underline From Center by Ian Lunn */

.hvr-underline-from-center {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}
.hvr-underline-from-center:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  right: 50%;
  bottom: 0;
  height: 10px;
  -webkit-transition-property: left, right;
  transition-property: left, right;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-underline-from-center:hover:before, .hvr-underline-from-center:focus:before, .hvr-underline-from-center:active:before {
  left: 0;
  right: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>

<section id="section-1">
  
  <div class="hover-link flexboxcenter">
    <div class="nav-1">
      <a href="#" class="hvr-underline-from-center nr-1">Old Desk</a>
      <div class="bg-1"></div>
      <a href="#" class="hvr-underline-from-center nr-2">Modern Desk</a>
      <div class="bg-2"></div>
    </div>
  </div> 
    
    

  
</section>
  
</body>

＆＃13;

悬停，影响其他元素并显示背景图像

2 个答案: