Jquery动画会有小小的停顿

jquery 动画jquery动画

解决方案 »

  1.   


    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" class="auto-style">
    <script type="text/javascript" src="../../../Public/Jquery/jquery-2.1.1.min.js"></script> <style type="text/css">
    body,html {width:100%;height:100%;background-color:#fff;font-size:8px;font-family:'微软雅黑','Microsoft YaHei',Helvetica,Arial,sans-serif;color: #333;} body,div,dl,dt,dd,ul,li,h1,h2,h3,h4,h5,h6,pre,code,form,
    fieldset,legend,input,button,textarea,blockquote {margin: 0;padding: 0;} ol,ul,li {list-style: none;} :link,:visited,a {text-decoration:none;}
    #main {position:relative;width:100%;height:100%;}
    #side-menu-wrapper {position:fixed;width:200px;height:100%;padding-left:30px;}
    #side-menu-list {position:absolute;top:100px;width:100%;color:#2895f1;}
    #side-menu-list li {display:list-item;height:30px;line-height:30px;font-size:14px;padding-left:35px;cursor:pointer;
    -webkit-transition:all 0.1s;transition:all 0.1s;}
    #side-menu-list li.menu-title:hover {text-decoration:underline;}
    #side-menu-list li.menu-title-active:before {content:"";position:absolute;margin-top:5px;left:20px;width:3px;height:20px;background-color:#2895f1;}
    #side-menu-list li.menu-title-active:after {content:"";position:absolute;margin-top:-18px;margin-left:-12px;border-top:3px solid transparent;border-bottom:3px solid transparent;border-left:3px solid #2895f1;}
    #side-menu-list li.menu-slide {position:relative;height:0;margin:0;padding:0;overflow:hidden;}
    #side-menu-list li.top-slide {height:30px;}
    #side-menu-list ul.menu-item-body {position:relative;}
    #side-menu-list li.menu-item {text-align:left;font-size:10px;padding-left:55px;color:#3baeda;font-size:12px;}
    #side-menu-list li.menu-item:hover {color:#0088cc;}
    #side-menu-sign {position:absolute;margin-top:5px;left:20px;width:3px;height:20px;background-color:#2895f1;display:none;}
    </style></head>
    <body>
    <script type="text/javascript">
    $(function() {
    /*----------菜单弹出----------*/
    $('.menu-title').on('click',function() { var all_title = $('.menu-title'),
    act_title = $('.menu-title-active'),
    side_sign = $('#side-menu-sign'), slide = $(this).next(),
    li_num = slide[0].getElementsByTagName('li'),
    index = all_title.index(act_title[0]);
    dis = this.offsetTop+5-parseInt(act_title.next().css('height'));
    //重置元素类和css
    side_sign.css({'margin-top':dis});
    all_title.removeClass('menu-title-active');
    this.className += ' menu-title-active ';
    $('.menu-slide').css({'height':0}); //判断height，如果为0则弹出菜单
    slide.css('height') === '0px' ? slide.css({'height':30*li_num.length+'px'}) : slide.css({'height':0});
    //计算sign需要滑动的距离
    all_title.index(this) > index ? side_sign.css({'margin-top':dis}) : side_sign.css({'margin-top':this.offsetTop+5});
    }); //菜单标志的滑动
    $('.menu-title').on('mouseover',function() {
    var dis = this.offsetTop+5; $('#side-menu-sign').stop().animate({'margin-top':dis},200);
    }); $('#side-menu-wrapper').on('mouseover',function() {
    $('#side-menu-sign').css({'display':'block'});
    }); $('#side-menu-wrapper').on('mouseout',function() {
    var dis = $('.menu-title-active')[0].offsetTop+5;
    $('#side-menu-sign').stop().animate({'margin-top':dis},200);
    });
    })

    </script> <div id="main">
    <div id="side-menu-wrapper">
    <div id="side-menu-list">
    <div id="side-menu-sign"></div>
    <ul>
    <li class="menu-title top-title menu-title-active">
    <div>首页状态</div>
    </li>
    <li class="menu-slide top-slide">
    <ul class="menu-item-body">
    <li class="menu-item">首页</li>
    </ul>
    </li>
    </ul> <ul>
    <li class="menu-title article-title">
    <div>文章</div>
    </li>
    <li class="menu-slide article-slide">
    <ul class="menu-item-body">
    <li class="menu-item">所有文章</li>
    <li class="menu-item">写文章</li>
    <li class="menu-item">分类目录</li>
    </ul>
    </li>
    </ul> <ul>
    <li class="menu-title user-title">
    <div>用户</div>
    </li>
    <li class="menu-slide user-slide">
    <ul class="menu-item-body">
    <li class="menu-item">所有用户</li>
    <li class="menu-item">添加用户</li>
    </ul>
    </li>
    </ul>
    </div>
    </div>
    </div>
    </body>
      

  2.   

    把所有的   .stop()  改成   .stop(true)   试试
      

  3.   

    好像mouseout有个什么问题来着，你试试mouseleave看看
      

  4.   

    mouseleave要离开元素，out是离开任何子元素。所以使用leave必须移动到其他大标签上才能触发。不过也没有别的办法了，谢谢