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滾動到元素動畫後的元素

回答

相關問題