Question

我在这里使用以下代码：

function toggle_visibility(id, h4id)
{
    var e = $("#" + id);
    var h = $("#" + h4id);
    h.css({'padding': '0 0 0 20px'});
    e.animate({height: 'toggle'}, 400, function(){
        var vImg = e.is(':visible') ? 'minus' : 'plus';
        h.css({'background-image': 'url(/images/' + vImg + '.png)'});
    });
}

如果您在此处查看此页面：http://opportunityfinance.net/industry/ 工作正常

如果您在此处查看此页面：http://opportunityfinance.net/consulting/default.aspx?id=6474 这真的是动画片。当您单击它向下滑动并单击它向上滑动时，它会跳转。

我正在尝试确定可能导致此问题的2个页面之间的区别，并且似乎无法理解为什么在没有第2页跳转的情况下它不会向下滑动或向上滑动。

我该如何解决这个问题？已经在SO上阅读了几个问题和答案而没有运气。

谢谢大家，如果您需要更多信息，请告诉我。

Answer 1

问题在于您正在开放和关闭动画的div内部内容的复杂性。在您的第一个示例中，您有一小段纯文本。在第二个示例中，您已经嵌入了视频。

您可以调查使用基于CSS3的动画是否可以为复杂内容提供更好的性能。

Answer 2

这与我所知道的内容的高度有关 - 即第一页切换内容相当短，因此动画速度400足以平滑地动画到全高，而在第二页它扩展的速度要快得多+因为它比外部内容包装器更高，当外包装器扩展以容纳它时会发生跳跃。

我能想到的最佳解决方案是降低动画速度！

Answer 3

就像安格斯所说的那样，你的问题是隐藏元素的高度每次都会改变，但你的动画时间没有（400毫秒）。就这么简单。你的问题是你有不同高度的同一时间，所以试着用相对于身高的比例来改变你的时间。

Answer 4

使用jQuery SlideUp（）和SlideDown（）代替animate（）。它会起作用......

Answer 5

好的，问题原因是<h4>标记的margin-bottom和margin-top设置为1em。这对于margin-top来说并不是一个真正的问题，因为我在toggle2类中为覆盖它的<h4>元素设置了5px的margin-top，但仍然引起了问题。 / p>

要解决此问题，我将margin-top和margin-bottom都设置为0px，并将<h4>Title</h4><div>contents</div>包裹在div标记中，并div将margin-bottom标记为1em。

现在似乎解决了这个问题！谢谢，但我有一种感觉，边缘和/或填充导致问题，我是对的！

jQuery .animate（）在1页面上跳跃，但在另一页面上没有

5 个答案: