hakanfilip hakanfilip - 4 months ago 10
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.



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!

Answer

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/

Comments