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

在悬停事件中，您可以保留需要显示的最后一项的变量。然后在回调函数中检查该变量是否显示。如果他们只是疯狂地移动东西并且在你使用.stop()时没有口吃，那么这最多可以显示2个显示/隐藏。我写下以下真正的快速，但你应该明白这一点。

$('#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();
  }
}

jQuery hover（）以及如何让它无缝地工作

2 个答案: