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內容，這通常與您滑動的元素或第一個子元素的頂部填充有關。