Question

我已经构建了一个切换按钮来滑动div以显示内容。我没有使用toggle()的正常jQuery函数，因为我希望显示前300px的内容，然后滑动以显示其余内容。

无论如何，我有一个脚本设置，动画容器div的高度，显示内部的内容。

function slideCut() {

    var revertHeight = 300;
    var finalHeight = 0;
    var s = 1000;

    $('.cutBottom a').click(function() {

        event.stopPropagation();
        var p = $(this).parent().parent();
        var h = p.css('height', 'auto').height();
        var cut = $(this).parent().find('.cutRepeat');

        // Fix height
        if (finalHeight == 0) {
            p.css('height', 'auto');
            finalHeight = p.height();
            p.height(revertHeight);
        }

        if ($(this).hasClass('toggled')) {
            $(this).removeClass('toggled');
            p.animate({height:revertHeight}, {
                duration: s
            });
            cut.fadeIn('fast');
        } else {
            $(this).addClass('toggled');
            p.animate({height:finalHeight}, {
                duration: s,
                complete: function() {
                    cut.fadeOut('fast');
                }
            });
        }
        return false;
    });

}//end

问题是，第二次将高度设置为完整大小（滑动div以显示内容）它没有动画，它只是跳到全高。为什么会这样？

工作示例：http://jsfiddle.net/6xp2Y/3/

Answer 1

在完成所有艰苦工作和小提琴之后，我们所要做的就是从代码中删除一行：

function slideCut() {

    var revertHeight = 300;
    var finalHeight = 0;
    var s = 1000;

    $('.cutBottom a').click(function() {

        event.stopPropagation();
        var p = $(this).parent().parent();
        //var h = p.css('height', 'auto').height(); //REMOVE THIS LINE
        var cut = $(this).parent().find('.cutRepeat');

        // Fix height
        if (finalHeight == 0) {
            p.css('height', 'auto');
            finalHeight = p.height();
            p.height(revertHeight);
        }

        if ($(this).hasClass('toggled')) {
            $(this).removeClass('toggled');
            p.animate({height:revertHeight}, {
                duration: s
            });
            cut.fadeIn('fast');
        } else {
            $(this).addClass('toggled');
            p.animate({height:finalHeight}, {
                duration: s,
                complete: function() {
                    cut.fadeOut('fast');
                }
            });
        }
        return false;
    });

}//end

slideCut();

更新了您的小提琴：http://jsfiddle.net/brandonscript/6xp2Y/5/

Answer 2

更新了答案！

这个问题就在这里

if (finalHeight == 0) {
  parent.css('height', 'auto');
  finalHeight = parent.height();
  parent.height(revertHeight);
  console.log('finalHeight:'+finalHeight);
}

这只是在开始时运行，因为finalHeight在首次运行后不再是0。

您可以通过再次关闭finalHeight后将0设置回if ($(this).hasClass('toggled')) { $(this).removeClass('toggled'); parent.animate({height:revertHeight}, { duration: speed }); cut.fadeIn('fast'); finalHeight = 0; } else { [...]来解决此问题，

{{1}}

jQuery animate（）第二次没有正确地为高度设置动画

2 个答案:

更新了答案！