Hover, effecting other elements and displaying background image

Question

I’ve been searching a lot after a guide or a question similar to the title of this post. But I didn’t find any good answers so I decided to create one of my own and share the result. I still need some guidance to make this effect better.

Please observe that I’m new here on Stackoverflow and new to jQuery.

I want to have a nice looking effect for my portfolio links. The effect I wanted to achieve when hovering over a link is the following:

The link you hover, should change color.
All the other links in the div should reduce opacity to increase the focus of the link you are hovering.
A background image will fade in and out, when hovering over a link.

Example:

I’ve created a Jsfiddle where you can se the result.

Jsfiddle

Problem:

If you hover over the links a few times the jQuery function will play out. I need to stop the script - How do I do that?

Is there someway to write this code smarter/better to increase the performance of the site? Or am I on the right track?

Here is the jQuery code:

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

Have a great day!

UPDATE

Thank you for all the answers. The best way to get the effect to work good is @Redet Getachew answer.

Here is a updated version i Codepen!

Codepen

_"If you hover over the links a few times the jQuery function will play out. I need to stop the script"_ Which portion of animation should stop? `.fadeOut()`, `.fadeIn()`? — guest271314, Jul 16 '16 at 18:21
I think the first function need to stop - '.fadeOut()' and '.fadeIn()' . If you hover the links a few times fast you will see the images switch as many times as you've hovered. — hakanfilip, Jul 16 '16 at 18:25

score 2 · Answer 1 · answered Jul 16 '16 at 18:27

You can use .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/

score 1 · Accepted Answer · edited May 23 '17 at 12:17

you can use css3 transition instead of jquery fade methods. place the images next to the links and use the pulse (+) css selector to affect their property. this may improve performance. see the following link. How to affect other elements when a div is hovered

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

@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;
}

<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>

It works super smooth. This is the way to go. Thank you! – hakanfilip Jul 17 '16 at 17:24 — hakanfilip, Jul 17 '16 at 17:24

Hover, effecting other elements and displaying background image

2 Answers2