jQuery animate(） 第二次不能正确地对高度进行动画处理

jQuery animate() doesn't correctly animate height the second time

本文关键字：高度 动画 处理 正确地 animate 第二次 不能 jQuery      更新时间：2023-09-26

我构建了一个切换开关，可以向下滑动div以显示内容。我没有使用jQuery的正常toggle()功能，因为我想显示顶部 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/

在所有这些艰苦的工作和小提琴被打破之后，我们所要做的就是从您的代码中删除一行：

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/

更新了答案！

道具就在这里

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 { [...]
相关文章：