jquery-Slide效果不一致,并且使用jquery 1.7发生了太多次

时间:2013-09-11 11:02:20

标签: jquery

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

我正在使用以下代码

Html:

<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);
    });
});

2 个答案:

答案 0 :(得分: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);
    });
});

演示:Fiddle

答案 1 :(得分: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);
        }
    );
});