Question

The best is to check out the example in http://jsfiddle.net/jDn7X/

$(".container.a1 div").hover(function(e){
    $(".popup").show(300).css({top: (e.pageY + 15) + "px",left: (e.pageX + 10) +"px"});
},function(){
    $(".popup").hide(300);    
});

The popup keep appering when I move over the div array.

<div class="container a1">
   <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

With clearQueue the behaviour is random.

What’s the best way to clear the previous jquery timers?

Answer 1

Try using stop() :

$(".container.a1 div, .container.a2 div").hover(
    function(e){
        $(".popup").stop(true,true)
                   .show(300)
                   .css({top: (e.pageY + 15) + "px",left: (e.pageX + 10) +"px"});
    },function(){
        $(".popup").stop(true,true)
                   .hide(300);    
    }
);

FIDDLE

I would probably do something more like this (see comments) :

$(".container.a1, .container.a2").on({
    mouseenter: function(){
        $(".popup").show(300);
    },
    mouseleave: function() {
        $(".popup").hide(300);    
    },
    mousemove: function(e) {
        $(".popup").css({top: (e.pageY + 15) + "px",left: (e.pageX + 10) +"px"})
                   .text('hovering : '+$(e.target).index());
    }
});
​

FIDDLE