如何修復jQuery SlideToggle Animation hitch？

我想創建一個常見問題解答頁面，並且我希望問題塊在點擊時滑落。儘管我已經達到了我想要的水平，但是當它回退時，動畫有一些非常明顯和令人討厭的問題，因爲第二個分組的標題對第一個分組的名稱進行了調整。如何修復jQuery SlideToggle Animation hitch？

我已經在本主題的所有內容中進行了搜索，但儘管已經檢查了很多問題和他們的答案，但沒有一個人爲我的案例工作。

我爲你製作了演示here。

HTML：

<div id = "FAQ" class = "tab"> 
    <h1 id = "faq_title">FAQ</h1> 
    <h4 id = "general_questions_title">Questions:&nbsp; 
     <i class = "fa fa-eye eye-show-hide"></i> 
    </h4> 
    <div class = "questions" id = "general_questions"></div> 
    <h4 id = "financial_questions_title">Questions:&nbsp; 
     <i class = "fa fa-eye eye-show-hide"></i> 
    </h4> 
    <div class = "questions" id = "financial_questions"></div>

的jQuery：

// Show category on click 
$(".eye-show-hide").on("click", function() { 
    // Toggle eye icon and make the others default 
    $(this).toggleClass("fa-eye fa-eye-slash"); 
    $(this).parent().siblings("h4").children().removeClass("fa-eye-slash").addClass("fa-eye"); 

    // Toggle category and close the others 
    $(this).parent().next().slideToggle(500).css("display", "inline-block"); 
    $(this).parent().next().siblings(".questions").slideUp(500); 
}); 

// Show answer on question click 
$(".questions ol li p").on("click", function() { 
    $(this).parent().next().slideToggle(500).css("display", "block"); 
    $(this).parent().next().siblings("p").slideUp(500); 
});

來源

2016-05-27 Angel Politis

對我而言似乎沒有任何問題？（使用Firefox） –

你能記錄關於這個問題的小屏幕錄像嗎？似乎工作相當好，但並不順利 – twxia

@AngelPolitis是的，我知道，但我認爲這個突然問題是jqeury slidedown oringinal效應。它使用數學方式控制填充，邊距來模擬動畫。我認爲你可以使用CSS3 GPU方式：D – twxia

slideToggle是用數學方法動畫，它會控制元素的height，padding，margin ...所以很難maintian如果你的DOM樹是複雜的，有時會導致此問題（如忘記重置默認邊距或填充）。

如果你不想看到這個問題。

您需要使用元素來包裝它並在其上設置一個min-height。它只是一個骯髒的黑客，以防止動畫元素不影響其他元素。在這些複雜結構中可能會有一些padding或margin導致此問題。

像這樣（的動畫元素，其子女或某處）： https://jsfiddle.net/9r5akuxt/8/

這將是通過使用CSS3 transform動畫它的偉大。

來源

2016-05-27 10:02:09 twxia

爲什麼min-height解決它？ –

嗨〜@AngelPolitis我在答案中描述 – twxia

是否有一個原因，你調用slideToggle之後添加.css("display", "inline-block")？我認爲這是導致你談論的問題的原因。

看到這個小提琴：https://jsfiddle.net/9r5akuxt/7/

來源

2016-05-27 08:51:59

是的，它必須是內聯塊，否則它拋出我的路線。 –

刪除它並沒有解決問題。 –

如何修復jQuery SlideToggle Animation hitch？

回答

相關問題