Need to tweak hover effect with JavaScript

Question

I have a little issue I need to fix as I'm trying to apply a hover effect on a div. Heres my Js code.

function fan_art_in () {
$(".fan-art-text").fadeIn("slow")
};


function fan_art_out () {
  $(".fan-art-text").fadeOut("fast")
};


$(".box-1").hover(fan_art_in, fan_art_out);

My issue with this is that when you quickly scroll over the div with the mouse (in and out of the element) the functions kind of stack up and repeat themselves until they match the number of times you hovered over the element. How can I make it so that once the mouse leaves the element it stops repeating the functions?

haxxxton · Accepted Answer · 2014-04-01 03:42:40Z

1

have a look at the stop() function

function fan_art_in () {
$(".fan-art-text").stop().fadeIn("slow")
};


function fan_art_out () {
  $(".fan-art-text").stop().fadeOut("fast")
};


$(".box-1").hover(fan_art_in, fan_art_out);

fiddle: http://jsfiddle.net/FvWTL/

edited Apr 1, 2014 at 3:42

answered Apr 1, 2014 at 3:37

haxxxton

6,4423 gold badges29 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

haxxxton Over a year ago

@presidio added a fiddle

Collectives™ on Stack Overflow

Need to tweak hover effect with JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related