hakanfilip hakanfilip - 3 months ago 7x
jQuery Question

Hover, effecting other elements and displaying background image

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:

  1. The link you hover, should change color.

  2. All the other links in the div should reduce opacity to increase the focus of the link you are hovering.

  3. A background image will fade in and out, when hovering over a link.


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



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() {
}, function() {

$(".nr-2").hover(function() {
}, function() {

// 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() {
function() {

Have a great day!


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() {

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