1

我在这里使用以下代码：

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 这真的是跳跃的动画。当你点击它向下滑动时它会跳跃，当你点击它向上滑动时它会跳跃。

我正在尝试确定可能导致此问题的两页之间的差异，并且似乎无法理解为什么如果没有第二页上的跳转它就不会向下或向上滑动。

我怎样才能解决这个问题？已经在 SO 阅读了几个问题和答案，但没有运气。

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

4

5 回答 5

0

就像安格斯说的那样，你的问题是你隐藏元素的高度每次都在变化，但是你的动画时间没有（400ms）。就这么简单。您的问题是不同高度的时间相同，因此请尝试以相对于高度的比率来更改时间。

于 2013-03-24T15:30:27.823 回答
0

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

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

于 2013-03-24T15:02:50.270 回答
0

据我所知，这与暴露的内容的高度有关——即第一页切换内容相当短，因此 400 的动画速度足以平滑地动画到全高，而在第二页上它的速率expands 快得多 + 因为它比外部内容包装器高，所以当外部包装器扩展以适应它时，就会发生跳转。

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

于 2013-03-24T15:03:22.783 回答
0

使用 jQuery SlideUp() 和 SlideDown() 代替 animate()。它会工作...

于 2013-03-24T15:48:02.727 回答
0

好的，问题是由于<h4>标签具有 amargin-bottom并margin-top设置为1em. 这对 来说并不是真正的问题margin-top，因为我在toggle2类中为<h4>覆盖它的元素设置了 5px 的 margin-top，但仍然引起了问题。

为了解决这个问题，我设置了margin-topand margin-bottomto0px并将每个都包装<h4>Title</h4><div>contents</div>在一个div标签中，给该div标签一个margin-bottomset to 1em。

这似乎已经解决了这个问题！谢谢，但我觉得边距和/或填充是导致问题的原因，我是对的！

于 2013-03-24T16:52:39.540 回答