jquery动画的意外延迟

Question

我有一个列表元素，最初设置为max-height: 200px; overflow-y:hidden;。在该元素下面有一个h3 -元素，您可以单击以显示整个列表。为此，我使用jQuery animate()方法动画元素的maxHeight -属性。动画应该持续1.2秒。之后，列表下面的文字从"显示更多"变为"显示更少"。当你点击它时，这个动画会被反转，同样持续1.2秒，之后文本会变回"show more"。一切都很好，除了一些意外的延迟:在第一个动画引发列表的maxHeight -属性之后，文本也要再花一秒钟左右的时间才能改变。然后，如果你点击"show less"文本，在动画开始前大约一秒钟什么都没有发生。是什么导致了这些意外的延误?

JS小提琴

编辑:正如Wa Kei解释的那样，这个延迟是由"过量"高度引起的，因为元素实际上小于1200px高。那么我怎么能重新工作我的功能，使其按预期工作，而不必使用固定的高度值?我不能使用方便的jQuery方法，如toggle()、show()或hide()，因为所有这些方法都完全隐藏对象，而不是接受最小和最大高度之类的东西。我对JS/JQuery/CSS的不同解决方案持开放态度，但html结构应保持不变。

Answer 1

下面是第一部分的示例:

if (!list.hasClass('opened')) {
    list.animate({
        maxHeight: '1200px'
    }, {
        duration: 1200,
        progress: function(){
            if(list.css('maxHeight') > list.css('height')) {
                $(this).stop();
            }
        },
        always: function() {
            $('#show_more').text('(weniger anzeigen)'); 
            list.addClass('opened');
        }
    });
}

编辑:

我稍微修改了一下你的代码:http://jsfiddle.net/z83cpbvj/1/

@progress (jQuery API)在动画的每一步之后调用的函数，每个动画元素只调用一次，不管动画属性的数量。

@always (jQuery API)当动画完成或未完成而停止时调用的函数