jquery - Mousenter cancel mouseleave on cursor re-enter -

in example if move mouse in, out, in, out mouseleave event still fire twice

http://jsfiddle.net/4bslm/1/

how can make fadeout event stop firing if cursor moved in?

$(document).on("mouseenter","div",function() { $(this).find("span").fadein(400);}).on("mouseleave","div",function() {$(this).find("span").delay(700).fadeout(400);}); 

(note .on required)

use stop() method stop playing animation.

jsfiddle

$(document).on("mouseenter", "div", function () {     $(this).find("span").stop().fadein(400); }).on("mouseleave", "div", function () {     $(this).find("span").stop().delay(700).fadeout(400); });