jQuery滚动到元素动画后的元素

我有一点动画滚动问题，并已耗尽我的调试工作。简而言之，我想要做的是滚动到用户单击的打开面板。用户点击一系列面板中的一个，该面板打开（动画），并且新打开的面板滚动到视图中。够简单。jQuery滚动到元素动画后的元素

我遇到的问题是，如果我点击已经打开的面板下方的面板，滚动会将我的新开放面板拉离屏幕一半。如果我在已经打开的面板上面点击面板，它可以正常工作。不知道发生了什么事。我使用CSS为面板打开动画，并使用jQuery为滚动设置动画。我假设有一些导致问题的动画队列计时，但我不知道。我甚至试图推迟滚动动画等待面板完成它的动画，但这也没有帮助。例如：

$('html, body').delay(1000).animate({scrollTop: $(this).offset().top - 75}, 250);

而不是

$('html, body').animate({scrollTop: $(this).offset().top - 75}, 250);

无论如何，任何帮助，将不胜感激。你可以找到我在这里工作的代码：https://jsfiddle.net/66zzudo4/

更新：您可以在这里找到工作代码：https://jsfiddle.net/66zzudo4/4/

来源

2015-06-17 Drew

我相信使用超时将工作：

setTimeout(function() { 
    $('html, body').animate({scrollTop: $(this).offset().top - 75}, 250); 
}, 1000);

或者，当动画结束时，jquery动画也会将回调作为参数：

$('html, body').animate({scrollTop: $(this).offset().top - 75}, function() { 
//Animation complete, do something now like animate other stuff. 
}, 250);

来源

2015-06-17 18:06:04 taxicala

setTimeout起作用了。这个问题肯定是小组关闭动画。当执行原始滚动代码行时，面板高度的值仍然表现为展开。由于代码在超时之前未执行，所以使用超时解决了问题。有趣的是，延迟功能确实以相同的方式工作。谢谢您的帮助！ – Drew

尝试取出.TOP

$('html, body').animate({ 
       scrollTop: $(this).offset() - 75 
      }, 250);

这里检查它。有用。 https://jsfiddle.net/66zzudo4/1/

来源

2015-06-17 18:10:41 guergana

您发送的链接的代码仍然是.top。我从代码中删除了.top，并且根本没有滚动动画发生。目标是从顶部滚动并打开面板75像素。 – Drew

哦，我很抱歉。我一定没有保存过它。这个对我有用。 https://jsfiddle.net/66zzudo4/2/ – guergana

不用担心，谢谢你的帮助。但动画卷轴根本不会发生。该面板只是在原地打开，从不从顶部滚动到75像素。 – Drew

jQuery滚动到元素动画后的元素

回答

相关问题