jquery hover propagation

Question

I'm using this on an hover image :

$('.img-style').hover (function(e) {
    var prixPlus = $(this).closest('a').attr('data-prix'); 
    prixPlus = parseFloat(prixPlus);
    var prixNew = prix + prixPlus;

    $('#chgePrix').html(prixNew.toFixed(2));
    $('#txtapart').fadeTo('fast', 0.1);
}, function(e) {
    $('#chgePrix').html(prix.toFixed(2));
    $('#txtapart').fadeTo('fast', 1);
});

But if I pass quickly the mouse 2 or more times over the image, $('#txtapart') fade in and out 2 or more times ! How can I stop the fade propagation ?

Thanks for your help...

Answer 1

Use stop() method

 $('#txtapart').stop(true,true).fadeTo('fast', 0.1);

This forces prior animation to end. The two true arguments clear the queue and set animation at it's end point so that the new animation can start immediately when other event is trigegred.

http://api.jquery.com/stop/

Answer 2

The function is getting called on every mouseover. There's no good way to detect if a function is already running in Javascript.