jQuery hover () и как заставить его работать без проблем

Question

У меня есть следующий код для реализации карусели, когда пользователь произвольно выполняет наведение на несколько секунд, похоже, что jquery hover () помещает их в очередь и выполняет все. То, как я хочу, чтобы эта карусель работала, это только выполнение последнего наведения.

$('#broker_carousel_controls li a').hover(function (e) {            
        e.preventDefault();
        var t = $(this);
        var speed = 'fast';
        $('#broker_carousel_controls li a.bcc_active').removeClass('bcc_active');
        var idx = $('#broker_carousel_controls li a').index(t);
        t.addClass('bcc_active');

        $('#broker_carousel li:visible').hide(speed, function () {

        });
        $('#broker_carousel li').eq(idx).show(speed, function () { 
            //busy = false;             
        });


    }, function () { });

Answer 1

Попробуйте использовать .stop() перед вашими hide и show функциями.stop() останавливает текущую анимацию, поэтому следующая может начаться немедленно.Я использую его иногда, чтобы предотвратить такие очереди событий.

$('#broker_carousel li:visible').stop().hide(speed, function () {
});
$('#broker_carousel li').eq(idx).stop().show(speed, function () { 
    //busy = false;             
});

Answer 2

В событии при наведении курсора вы можете сохранить переменную последнего элемента, который нужно показать. Затем проверьте эту переменную в вашей функции обратного вызова для шоу. Это дает максимум 2 показа / скрытия, если они просто дико перемещаются по вещам и не заикаются при использовании .stop() Я написал очень быстро следующее, но вы должны понять.

$('#broker_carousel_controls li a').hover(CarouselHover
, function () { });

var lastQueue = null;
function CarouselHover(e)
{
        e.preventDefault();
        if (lastQueue == null)
        {
          lastQueue = this;
          StartHoverShow();
        }
        else
        {
          lastQueue = this;
        }
}

function StartHoverShow()
{
      if (lastQueue != null)
      {
        var t = $(lastQueue);
        lastQueue = null;
        var speed = 'fast';
        $('#broker_carousel_controls li a.bcc_active').removeClass('bcc_active');
        var idx = $('#broker_carousel_controls li a').index(t);
        t.addClass('bcc_active');

        $('#broker_carousel li:visible').hide(speed, function () {

        });
        $('#broker_carousel li').eq(idx).show(speed, function () { 
            //busy = false;  
           ShowCallback();
        });
      }
}

function ShowCallback()
{
  if (lastQueue != null)
  { 
    StartHoverShow();
  }
}