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?

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