jQuery slideDown動畫抖動

Question

我注意到當我更改內容內容（我認爲有太多空白）的填充設置時，它完全混淆了平滑下拉。我不確定爲什麼會這樣，我在JavaScript中看不到任何東西。

Fiddle

HTML：

<div class="container"> 
    <div class="title"><h2><img src="http://i.imgur.com/XsDSYw6.png">TIME</h2></div> 
<div class="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam turpis urna, tristique quis convallis nec, dapibus sed velit.</p></div> 
<div class="title"><h2><img src="http://i.imgur.com/XsDSYw6.png">CREATIVITY</h2></div> 
<div class="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam turpis urna, tristique quis convallis nec, dapibus sed velit.</p></div> 
<div class="title"><h2><img src="http://i.imgur.com/XsDSYw6.png">BUDGET</h2></div> 
<div class="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam turpis urna, tristique quis convallis nec, dapibus sed velit.</p></div> 
</div> 

CSS：

.title { 
    padding-left:15px; 
    height:17px; 
    background: transparent url('http://www.elevate1.co.uk/dropdownwitharrows/images/arrow-toggle.png') 0px 5px 
     no-repeat; 
    cursor:pointer; 
    margin-bottom:10px; 

} 
.title img{ 
    width: 24px; 
    margin-right: 5px; 
    float: left; 
} 

.title span{ 
    font-size: 16px; 
    line-height: 24px; 
    float: left; 
} 
.on { 
    background: transparent url('http://www.elevate1.co.uk/dropdownwitharrows/images/arrow-toggle.png') 0 -10px no-repeat; 
} 
.content { 
    display:none; 
    padding: 10px; 
    margin-bottom:10px; 
} 

的JavaScript：

$(document).ready(function() { 
    $('.title').click(function() { 
     $('.title').removeClass('on'); 
     $('.content').slideUp('normal'); 
     if($(this).next().is(':hidden') == true) { 
      $(this).addClass('on'); 
      $(this).next().slideDown('normal'); 
     } 
    }); 
}); 

Answer 1

發生了什麼事情是因爲容器的高度是動畫的，容器的孩子們受到邊緣，線條高度等的影響，這些都依賴於容器的邊界。添加以下修正：

.content { 
    overflow: hidden; 
} 

呀，就這麼簡單：P

這是你的Fiddle更新。