jQuery：幻燈片動畫走得很遠，然後「跳」到正確的高度

我見過關於類似問題的幾個問題，但我還沒有找到一個對我有意義的解決方案。問題是在這裏JSFiddle：http://jsfiddle.net/twchapman/EEXjR/2/jQuery：幻燈片動畫走得很遠，然後「跳」到正確的高度

點擊投資組合看到的行爲。

功能我寫道：

function changeTab(tab) { 
    active = tab; 
    $("#" + tab).slideDown(animspeed); 
} 

function change(tab) { 
    if (tab == active) return; 
    $("#" + active).slideUp(animspeed, function() { 
     changeTab(tab); 
    }); 
}

我只使用瀏覽器，但我敢肯定你會得到在任何瀏覽器這個錯誤：在頁面加載時，它的幻燈片內容的div下降，然後點擊鏈接（目前只有投資組合實際運作）將滑動當前股利，然後正確的下跌。

它的工作幾乎完全按預期進行，但有一個小問題：動畫開始時，div的高度「跳躍」，在動畫發生時它會一度較高，然後在完成時「跳」到正確的大小。

我發現的兩種常見解決方案提示：1.爲已存在的div的樣式添加寬度，以及2.在調用幻燈片函數時更改高度/邊距參數。對我而言，第二種解決方案似乎不應該是必要的，因爲除了動畫長度以外，我不提供任何選項。

我希望這只是我失去了一些東西，是愚蠢的，不是我做事的方式的大問題。

來源

2013-01-25 twchapman

您正在使用的是什麼版本的jQuery？我以前遇到過類似的問題，並使用更新的版本爲我解決了這個問題。 – Antony

最好是將代碼隔離到演示中，而不是在遠程和可能危險的網站上。 – Joseph

Antony：我目前直接鏈接到網站的最新版本（http://code.jquery.com/jquery-latest.js） – twchapman

問題來自填充，有時可以使jQuery動畫緊張。針對您的問題的快速解決方案是讓您的Js保持原樣，併爲您的佈局使用自然盒子模型。

在你的CSS只是包括：

* { -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
      box-sizing: border-box; }

我真的建議閱讀this保羅愛爾蘭的博客文章，幷包括所有的項目，這些代碼。

下面是一個工作演示：http://jsfiddle.net/gleezer/EEXjR/3/

來源

2013-01-25 03:14:48 Nobita

完美！我對此毫不知情，這解釋了很多。謝謝您的幫助：） – twchapman

更新您的js。

function change(tab) { 
    if(tab == active) return false; 
    console.log(tab); 
    console.log(active); 
    if($("#" + active).length){ //check element is exists. 
     $("#" + active).slideUp(animspeed, function() {changeTab(tab)}) 
    }else{ 
    changeTab(tab); 
    } 

}

來源

2013-01-25 01:25:54 jeewiya

感謝您的建議，但這似乎沒有改變我的行爲......我用你的代碼替換了我的change（）函數，我是否應該做別的事情？ – twchapman

準備好函數裏面的代碼$（document）.ready（function（）{ //把你所有的jQuery善良都放在這裏， }）; – jeewiya

jQuery：幻燈片動畫走得很遠，然後「跳」到正確的高度

回答

相關問題