jQuery slideDown不流畅

Question

我正在为我的朋友在jQuery菜单上工作。菜单完成后，唯一的问题是滑下不流畅，我在这里找不到问题。

jQuery代码：

$.fn.vmenu=function(settings) 
{ 
    vMenu={ 
     init: function(elem) { 
      $(elem).find('li').each(function(){ 
       var u=$(this).children('ul'); 
       if (u.length>0) { 
        $(this).addClass('has_child'); 
       } 
       var a=$(this).children('a'); 
       if (a.hasClass('active')) { 
        $(this).addClass('active').parents('li').addClass('open'); 
       } 
      }); 

      $(elem).find('ul').each(function(){ 
       var o=$(this).find('li.open'); 
       var a=$(this).find('a.active'); 
       if (o.length == 0 && a.length==0) { 
        $(this).css('display','none'); 
       } 
      }); 

      $(elem).find('a').click(function(){ 
       return vMenu.click($(this)); 
      }); 
     }, 
     click: function(elem) { 
      var l=$(elem).parent('li'); 
      var u=$(l).children('ul'); 

      if (u.length == 0) { 
       return this.forward(elem); 
      } 

      if ($(l).hasClass('open')) { 
       $(l).removeClass('open'); 
       $(l).find('ul').stop(true,true).slideUp(300); 
       $(l).find('li').removeClass('open'); 
       if($(l).children('a').hasClass('open')) { 
        $(l).children('a').css({color:'#939393'}); 
        $(l).children('a').removeClass('open'); 
       } 
      } else { 
       $(l).addClass('open'); 
       $(u).stop(true,true).slideDown(300); 
       $(l).children('a').css({color:'#F37121'}); 
       $(l).children('a').addClass('open'); 
      } 

      return false; 
     }, 
     forward: function(elem) { 
      return true; 
     } 
    } 
    vMenu.init($(this)); 
} 

$(document).ready(function(){ 
$('#vmenu').vmenu(); 
}); 

CSS代码：

/* ### partner box ### */ 
.partnerBox { padding-top: 52px; width: 253px; float: left; background: url('http://www.realbingo.nl/images/partner-top.png') left top no-repeat; } 
.partnerBox .bottom { padding-bottom: 12px; float: left; background: url('http://www.realbingo.nl/images/paasbonus-bottom.png') left bottom no-repeat; } 
.partnerBox .mid { padding: 0 20px 0 15px; width: 218px; float: left; background: url('http://www.realbingo.nl/images/paasbonus-mid.png') left top repeat-y; } 
.partnerBox h3 { padding-left: 5px; margin-top: -36px; color: #fff; font-size: 20px; } 
.partnerBox ul { padding: 0px 0 0 0; margin-bottom: -5px; overflow: hidden; width: 100%; } 
.partnerBox li { padding-left: 5px; font-size: 13px; float: left; list-style: none; width: 208px; line-height: 39px; border-bottom: 0px; } 
.partnerBox li a { padding-left: 9px; color: #939393; text-decoration: none; display: block; background: url('http://www.realbingo.nl/images/arrow1.png') left center no-repeat; } 
.partnerBox li a:hover { color: #F37121 !important; } 
#vmenu li { border-bottom: #ece3e3 solid 1px; } 
#vmenu li > ul > li { border-bottom: 0px; height: 30px; line-height: 30px; margin-top: -8px;} 
.text ul{ line-height: 18px; margin-bottom: 2px; } 

HTML代码：

<div class="partnerBox"> 
    <div class="bottom"> 
     <div class="mid"> 
      <h3>Linkpartners</h3> 
      <ul id="vmenu"> 
       <li><a href="#">Bingo</a> 
        <ul> 
         <li><a href="#">Link 1</a></li> 
         <li><a href="#">Link 2</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Roulette</a> 
        <ul> 
         <li><a href="#">Link 1</a></li> 
         <li><a href="#">Link 2</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Poker</a> 
        <ul> 
         <li><a href="#">Link 1</a></li> 
         <li><a href="#">Link 2</a></li> 
        </ul> 
       </li> 
       <li class="text"><a href="#">Tekst</a> 
        <ul> 
         Dit is een lap tekst die door en door gaat tot het einde.. en verder... :D:D:D:D:D:D:D:D 
        </ul> 
       </li> 
      </ul> 
     </div> 
    </div> 
</div> 

任何提示和/或想法，使代码更高效的非常赞赏太。

Answer 1

如果您在讨论slideDown跳到底部显示时，很可能是由“.text ul”CSS底部边距造成的。 jQuery无法计算包括边距在内的高度。

如果您正在讨论在动画过程中滑动的slideDown内容，这通常与您滑动的元素或第一个子元素的顶部填充有关。