jQuery的.animate（）跳动1页上，但不是在另一页

我使用下面的代码在这里：jQuery的.animate（）跳动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上已经阅读过几个问题和答案，但没有运气。

谢谢你们，让我知道如果你需要更多的信息。

来源

2013-03-24 Solomon Closson

尝试在第一页上的第二页的内容，看看会发生什么。 – 2013-03-24 15:05:39

这是一个活网站，我不能只是改变这样的网页内容。此外，它的内容并不重要（如果你看第3个'

'标签几乎没有任何内容，仍然跳跃），它仍然在第2页跳动！在我假设的实际页面上必定会有不同的东西（比如'paddings'或'margins）导致这个...？ – 2013-03-24 15:19:11

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

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

来源

2013-03-24 15:02:50 Nate

这不可能是真的，因为即使是第三个'

'标签也是如此，生产与零售之间：中层食品连锁企业只有文字，点击时仍然很刺激。 – 2013-03-24 15:07:04

与h4一起获得的跳跃是经典的jQuery幻灯片动画凹凸，与其他元素获得的较差性能无关。 http://jqueryfordesigners.com/slidedown-animation-jump-revisited/ – Nate 2013-03-24 15:29:05

较差的表现与其他元素？这是什么意思？至于滑动动画碰撞，所以我必须设置一个高度？假设一个高度数组比？ – 2013-03-24 15:46:05

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

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

来源

2013-03-24 15:03:22 Angus

如果您点击第1页上的第112届国会影响力机会财务***'

'标记的***最终行动更新，这也是一个非常大的高度，但幻灯片仍然很好，没有任何跳跃。所以，这个逻辑不太对。 – 2013-03-24 15:12:05

我刚刚将动画放慢到1000毫秒（1秒），仍然没有变化！我怀疑放慢动画速度会解决这个问题！ – 2013-03-24 15:55:17

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

来源

2013-03-24 15:30:27 mrbangybang

我减慢到1000毫秒，没有好处，问题依然存在。另外，如果您查看该页面上的第三个'

'标记，则它是一个1 LINE句子，点击它时会显示，但仍会跳转。 – 2013-03-24 16:16:12

使用jQuery SlideUp（）和SlideDown（）代替animate（）。它将工作...

来源

2013-03-24 15:48:02

只是改变它使用'slideUp'和'slideDown'，但没有帮助。问题依然存在。 – 2013-03-24 16:04:05

您正在为每个父div添加“MARGIN-BOTTOM：1em”。将其删除。 – 2013-03-25 10:00:16

好吧，这个问题是由于具有margin-bottom和margin-top设置为1em的<h4>标签。这对margin-top来说并不是什么问题，因为我在toggle2类中为<h4>元素设置了一个5px的margin-top，它覆盖了它，但仍然存在问题。

为了解决这个问题，我都设置margin-top和margin-bottom到0px和div标签中缠绕。<h4>Title</h4><div>contents</div>给予该div标签margin-bottom设置为1em。

这似乎已经解决了问题吧！谢谢，但我有一种感觉，边距和/或填充导致了问题，我是对的！

来源

2013-03-24 16:52:39

jQuery的.animate（）跳动1页上，但不是在另一页

'标签几乎没有任何内容，仍然跳跃），它仍然在第2页跳动！在我假设的实际页面上必定会有不同的东西（比如'paddings'或'margins）导致这个...？ – 2013-03-24 15:19:11

回答

'标签也是如此，***生产与零售之间：中层食品连锁企业***只有文字，点击时仍然很刺激。 – 2013-03-24 15:07:04

'标记的***最终行动更新，这也是一个非常大的高度，但幻灯片仍然很好，没有任何跳跃。所以，这个逻辑不太对。 – 2013-03-24 15:12:05

'标记，则它是一个1 LINE句子，点击它时会显示，但仍会跳转。 – 2013-03-24 16:16:12

相关问题

'标签也是如此，生产与零售之间：中层食品连锁企业只有文字，点击时仍然很刺激。 – 2013-03-24 15:07:04