On mouseenter div animate ease

Question

I have question about hovering.

$(".hover li img").mouseenter(function() {
    $(".overlay").animate({
        left: pixels+"px"
    });
});

Class overlay is transparent box around image, with red border.

I want when hover on some img, border go there. And it isn't problem for me. My problem is when hover on first,second, third, forth,fifth, and stop on sixth image. But fast moving over image. My overlay class stops for a moment on every image.

My question is : How to overlay class not stop on every image after moving mouse over it. I appreciate answer, thanks anyway

Answer 1

i suggest you to calculate the left according to the current image's offet left like for example only

$(".hover li img").mouseenter(function() {
that  = this;
  $(".overlay").stop(true,false);
$(".overlay").animate({
    left: that.offset().left+"px"
});
 });

or

  $(".hover li img").mouseenter(function() {

  $(".overlay").stop(true,false);
 $(".overlay").animate({
    left: pixels+"px"
});
 });