代码之家  ›  专栏  ›  技术社区  ›  o01

jquery在悬停错误时向上/向下滑动

  •  1
  • o01  · 技术社区  · 16 年前

    我有一个大div和一个小div在里面。较小的div最初显示为隐藏。当用户将鼠标悬停在大型容器div上时,较小的div将使用show/hide函数设置动画。到目前为止一切正常。

    然而。较小的div从底部进入动画-因此,如果我让光标悬停在最底部的容器上,它在较小div的动画上悬停,而它正在滑入。因此,现在光标悬停在较小的div上而不是较大的div上,从而触发较小div上的hide函数。当较小div滑入或滑出光标指向的位置时,这将创建一个无限的show/hide调用循环。

    有什么办法可以避免这种情况,而不是打破在容器上的悬停,因为较小的div进入?

    这就是我的意思:

    alt text http://archivedworks.com/fileserver/jQuery_hover_showhide.jpg

    2 回复  |  直到 16 年前
        1
  •  6
  •   Nick Craver    16 年前

    你可以这样做:

    $("#outerDiv").hover(function() {
      $("#innerDiv:hidden").slideDown(); //your show code
    }, function() {
      $("#innerDiv:visible").slideUp(); //your show code
    });
    

    这只会在隐藏动画可见时排队( :visible ,并且只有在动画没有( :hidden ),防止现在的队列/循环行为。

        2
  •  1
  •   Jage    16 年前
    $('#idOfLargeDiv').hover(
        function() {
            $('#idOfSmallDiv').slideDown();
        }, 
        function() {
            $('#idOfSmallDiv').slideUp();
        }
    );