在jQuery slideDown動畫結束時修復垂直跳轉

Question

我是Jquery的新手，但寫過一部簡單的垂直手風琴。 這似乎是我需要的工作，但在滑動結束時有一個可見的混蛋。

如果有人能看到它並建議解決方案，它將阻止我拉出我的頭發！

這是我的測試頁面的鏈接（我的所有代碼[css，js等]都在一個文件中以方便）： Vertical Accordion

Answer 1

在你的自定義代碼中，我通過對CSS進行一些小改動並指定手風琴中p標簽的高度來擺脫“跳躍”。

由於您通過腳本隱藏所有內容，因此：

$(".accordion p:not(:first)").hide(); 

也許你可以走過去並獲得每件作品的計算高度，並將其添加到每個項目樣式中，從而消除最后得到的“混蛋”。

這些方面的東西：

$('.accordion p').each(function(index) {
   $(this).css('height', $(this).height());
});

編輯

我繼續下載了你的頁面副本並對其進行了測試，它似乎在一些快速的瀏覽器測試中運行良好，所以這里是你修改過的vaccordian.js：

$(document).ready(function(){   
    $('.accordion p').each(function(index) {
       $(this).css('height', $(this).height());
    });


    $(".accordion h3:first").addClass("active");
    $(".accordion p:not(:first)").hide();


    $(".accordion h3").click(function(){
        $(this).next("p").slideToggle("slow")
        .siblings("p:visible").slideUp("slow");
        $(this).toggleClass("active");
        $(this).siblings("h3").removeClass("active");
    });
});

TL; DR - 通過在手風琴的每個“開口”部分設置一個明確的高度，它會移除生澀的動畫。 所以我們通過腳本設置這些高度。

Answer 2

如果其他人遇到此問題，請參考以下內容：

.ui-accordion .ui-accordion-content {
    overflow: auto;
    box-sizing: content-box;
    -moz-box-sizing: content-box;
}

我沒有時間調查這個修復工作原理的細節，但我想我還是要分享。

Answer 3

我只能通過使用overflow: auto或overflow: hidden來解決我的問題。 我認為這是有效的，因為它忽略了元素的高度，並將顯示它可以做的任何事情。 只要不是一個很小的高度它應該能夠顯示一切，但添加overflow屬性允許它更平滑地過渡，因為它不計算高度。