Question

我想知道，当我不知道段落的高度时，如何使用.animate（）显示隐藏文本？由于上下文，解决方案必须使用.animate（）。

$(".moreText").click(function() {
    $(".paragraph").animate({height: "???px"});
    return false;
});

$(".lessText").click(function() {
    $(".paragraph").animate({height:"60px"});
    return false;
});

我不知道段落的高度，因为它是隐藏的。一开始，它有活跃的类.lessText。

Answer 1

您是否尝试过slideToggle（请参阅documentation here）？

如果你真的想使用animate，你不必知道实际身高，你可以使用它：

animate({height: 'toggle'});

如here in the documentation所述，但如果您的元素实际上是隐藏的（例如display: none），则必须手动显示。

注意：与.slideDown（）等简写动画方法不同 .fadeIn（），。animate（）方法不会使隐藏元素可见作为效果的一部分。例如，给定$（“someElement” ）.hide（）。animate（{height：“20px”}，500），动画将会运行，但是该元素将保持隐藏状态。

Answer 2

您可以使用jQuery方法.height()来获取段落的高度。然后，您可以将其分配给使用.animate()的函数可以访问的变量。这样的事情：var pHeight = $('.paragraph').height();，然后稍后传入pHeight以获取您的价值。

如何使用.animate（）显示隐藏文本？

2 个答案: