JQuery закончить слайд до следующего наведения мыши

Question

У меня есть список тегов span, которые запускают событие mouseover, которое обновляет атрибут src и вставляет следующее изображение. Проблема, с которой я сталкиваюсь, заключается в том, что если пользователь быстро прокручивает несколько элементов управления, то анимациястановится очень нервным и выглядит плохо.Ниже мой текущий код:

$("#list .client").mouseover(function(){
    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);  
        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);
    }
    //console.log("Img Source: " + imgSrc);
});

Что я хотел бы сделать, это добавить задержку, если в данный момент анимация еще продолжается.Я не хочу ставить в очередь функции, просто выполнить последнюю вызванную при последней наведении мыши.Я предполагаю, что это как-то связано с SetTimeout, но меня немного смущает, как этого добиться.

Есть идеи?

Спасибо!

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

Большое спасибо за вашу помощь, наконец-то заставил его работать с 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 (true, true) перед анимацией (например, $("#myelement").stop(true,true).fadeIn()). Первое значение true очищает очередь анимации для элемента, а второе значение true останавливает текущую анимацию.

Answer 2

Вы можете сделать 2 вещи.

Во-первых, вы можете использовать плагин hoverIntent, который будет игнорировать быстрое наведение мыши, или вы можете отменить привязку при наведении курсора до завершения анимации.

http://cherne.net/brian/resources/jquery.hoverIntent.html

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

Использовать unbind как таковой:

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

Сделать функцию, которая делает все это именованной функцией вместо анонимной.Затем, когда анимация показа изображения завершается.перепривязать функцию наведения мыши так же, как вы вначале связываете ее

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);