jQuery slideDown动画抖动

我注意到当我更改内容类的填充设置时(我认为有太多的空白区域),它完全弄乱了平滑的下拉菜单.我不确定为什么会这样,我在JavaScript中看不到任何内容.

小提琴

HTML:

    
TIME
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam turpis urna, tristique quis convallis nec, dapibus sed velit.
CREATIVITY
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam turpis urna, tristique quis convallis nec, dapibus sed velit.
BUDGET
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam turpis urna, tristique quis convallis nec, dapibus sed velit.

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');
        } 
    });
});

monners.. 7

发生的事情是容器的高度是动画的,容器的子容受边缘,线高等的影响,这些都取决于容器的边界.添加以下内容进行修复:

.content {
    overflow: hidden;
}

是的,就这么简单:P

这是你的小提琴更新.