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更新。