0

我正在使用 "jquery-1.7.1.min.js" ，我想要的是当我进入某个菜单时，下拉菜单应该平滑向下滑动但它不会连续发生。它非常不一致，有时什么也不显示，有时它会继续上滑和下滑。请帮我摆脱它。

我正在使用下面的代码

网页：

<nav>
    <ul class="menuList">
      <li><a href="#">Main Menu</a>
        <div class="submenu">
          <div class="submenuInner">
            <div class="menus clearfix">
           <ul class="firstlist">
                <li><a href="">Sub Menu Left 1</a></li>
                <li><a href="">Sub Menu Left 2</a></li>
                <li><a href="">Sub Menu Left 3</a></li>
                <li><a href="">Sub Menu Left 4</a></li>
                <li><a href="">Sub Menu Left 5</a></li>
           </ul>
           <ul>
                <li><a href="">Sub Menu Right 1</a></li>
                <li><a href="">Sub Menu Right 2</a></li>
                <li><a href="">Sub Menu Right 3</a></li>
                <li><a href="">Sub Menu Right 4</a></li>
                <li><a href="">Sub Menu Right 5</a></li>
              </ul>
           </div>
          </div>
        </div>
      </li>
    </ul>
</nav>

脚本 ：

$(document).ready(function() {
$(".menuList li").mouseenter( function() {
        $(this).find(".submenuInner").stop().css({"margin-top":"0"});
    $(this).children(".submenu").slideDown("slow");
    });

    //console.log("menuin");

    $(".menuList li").mouseleave( function() {
        $(this).children(".submenu").slideUp("slow");
        //$(this).find(".submenuInner").animate({marginTop:"-100%"},{queue :false,duration :50});
        $(this).find(".submenuInner").animate({marginTop:"-100%"},500);
    });
});
4

2 回答 2

1

尝试

$(document).ready(function() {
    $(".menuList li").mouseenter( function() {
        $(this).find(".submenuInner").stop(true, true).css({"margin-top":"0"});
        $(this).children(".submenu").stop(true, true).slideDown("slow");
    });

    //console.log("menuin");

    $(".menuList li").mouseleave( function() {
        $(this).children(".submenu").stop(true, true).slideUp("slow");
        //$(this).find(".submenuInner").animate({marginTop:"-100%"},{queue :false,duration :50});
        $(this).find(".submenuInner").stop(true, true).animate({marginTop:"-100%"},500);
    });
});

演示：小提琴

于 2013-09-11T11:09:25.840 回答
0

你能用这个代码吗：Demo

 $(document).ready(function () {
    $(".menuList li").hover(
        function () {
            $(this).find(".submenuInner").stop(true, true).css({
                "margin-top": "0"
            });
            $(this).children(".submenu").slideDown("slow");
        },
        function () {
            $(this).children(".submenu").slideUp("slow");
            $(this).find(".submenuInner").animate({
                marginTop: "-100%"
            }, 500);
        }
    );
});
于 2013-09-11T11:10:05.613 回答