0

我有以下代码来实现轮播，当用户随机执行悬停几秒钟时，看起来 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 () { });
4

2 回答 2

2

尝试.stop()在你的hide和show函数之前使用。stop()停止当前动画，以便下一个可以立即开始。我有时使用它来防止此类事件排队。

$('#broker_carousel li:visible').stop().hide(speed, function () {
});
$('#broker_carousel li').eq(idx).stop().show(speed, function () { 
    //busy = false;             
});
于 2011-01-04T15:33:46.757 回答
0

在悬停事件中，您可以保留需要显示的最后一个项目的变量。然后在回调函数中检查该变量以进行显示。如果它们只是疯狂地移动事物并且在您使用时没有口吃，则最多可以显示 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();
  }
}
于 2011-01-04T16:07:12.420 回答