jQuery hover - выполнить следующий переход только после того, как ток закончится

Question

Как мне рассчитать время перехода, чтобы следующий начался только после завершения текущего?Теперь он переходит к следующему переходу, находясь в середине течения, и выглядит скачкообразным, особенно когда я быстро наводю курсор на несколько ссылок.

Вот ссылка на то, как это выглядит http://dynamo.kco.ie/about-us/clients, и мой код:

function slideShow() { 
    $("#list .client").unbind('mouseover');
    var imgSrc = $(this).attr('rel');
    var image1 = $("#clientImage1");
    var image2 = $("#clientImage2");

  if(image1.is(":visible")){
      image2.attr('src', imgSrc); 
      image2.stop(true, true).show("slide", { direction: "down" }, 400, function() {
         $("#list .client").mouseover(slideShow);
      });  
              image1.stop(true, true).hide("slide", { direction: "up" }, 400);
              //image1.hide();
      }
      else{
          image1.attr('src', imgSrc);
          image1.stop(true, true).show("slide", { direction: "down" }, 400);
          image2.stop(true, true).hide("slide", { direction: "up" }, 400);
    }

    // binding  
    $("#list .client").mouseover(slideShow);
}


$("#list .client").mouseover(function(){
   slideShow();
});

Любые идеи?

Редактировать:

Большое спасибо за вашу помощь, наконец-то получил его работать сhoverIntent!Рабочий код:

$(document).ready(function(){   
    $("#clientImage2").hide();  
    $("#list .client").hoverIntent(config); 

});


var config = {    
     over: slideShow, // function = onMouseOver callback (REQUIRED)    
     timeout: 600, // number = milliseconds delay before onMouseOut    
     out: doNothing // function = onMouseOut callback (REQUIRED)    
};
function slideShow() {
    var imgSrc = $(this).attr('rel');
    var image1 = $("#clientImage1");
    var image2 = $("#clientImage2");

    if(image1.is(":visible")){
      image2.attr('src', imgSrc); 
      image2.stop(true, true).show("slide", { direction: "down" }, 600);  
      image1.stop(true, true).hide("slide", { direction: "up" }, 600);
      }
    else{
      image1.attr('src', imgSrc);
      image1.stop(true, true).show("slide", { direction: "down" }, 600);
      image2.stop(true, true).hide("slide", { direction: "up" }, 600);
      }
}

function doNothing(){}

Answer 1

Попробуйте изменить stop() с

stop(true,true) на stop(true,false)