Question

我有一个最初设置为max-height: 200px; overflow-y:hidden;的list-element。在该元素下方有一个h3 - 元素，您可以单击该元素以显示整个列表。为此，我使用jQuery animate（）方法为元素的maxHeight - 属性设置了动画。动画应持续1.2秒。之后，列表下方的文本从“显示更多”变为“显示更少”。当您单击它时，此动画将反转，持续时间为1.2秒，之后文本将更改回“显示更多”。一切正常，除了一些意外的延迟：在第一个引发列表的maxHeight - 属性的动画之后，文本也需要另外一秒左右的时间来改变。然后，如果单击“显示较少”文本，则在动画开始前约一秒钟不会发生任何事情。造成这些意外延误的原因是什么？

JS Fiddle

编辑：正如Wa Kei所解释的，这种延迟是由“超额”高度引起的，因为该元素实际上小于1200px高。那么我怎样才能重新设计我的功能，以便在不使用固定高度值的情况下按预期工作？我不能使用像toggle（），show（）或hide（）这样的方便的jQuery方法，因为所有这些方法都完全隐藏了一个对象，而不是接受最小和最大高度或类似的东西。我对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）动画完成或停止而未完成时调用的函数

jquery动画出现意外延迟

1 个答案: