Question

I have 10 functions:

$("#one").mouseenter(function(){
$('#two,#three,#four,#five').fadeTo(700,0.2);
});
$("#one").mouseleave(function(){
$('#two,#three,#four,#five').fadeTo(700,1);
});


$("#two").mouseenter(function(){
$('#one,#three,#four,#five').fadeTo(700,0.2);
});
$("#two").mouseleave(function(){
$('#one,#three,#four,#five').fadeTo(700,1);
});

etc…

how do I make each function act immediately? At the moment they wait for the function to finish before starting the next one. Which causes chaos if you go from div one to div two before the function has finished (for example).

Answer 1

$("#one").stop().fadeTo()

Documentation for .stop, which halts any current animation.

I might also suggest that you use classes:

$(".thing").mouseenter(function () {
   $(".thing").not(this).stop().fadeTo(700, 0.2);
});