正確的方法來滑動切換然后動態創建內容和滑動切換回來

Question

我有一個包含一些元素的 div。 當用戶選擇一個按鈕時，div 被清除並動態填充新內容。 我在清除 div 之前和填充它之后運行 slideToggle。 隱藏 div 的第一個切換工作正常。 第二個 slideToggle 不運行（新的 div 只是在沒有動畫的情況下加載）。

我花了幾個小時嘗試不同的東西（回調函數，.on，promises，將第二個 slideToggle 函數放在代碼的不同部分，等等）。 我終於通過使用 setTimeout 以 1 毫秒的時間讓它工作。 盡管它在工作，但我比以往任何時候都更加困惑，並質疑我生活中的一切。 請幫助我了解發生了什么。

工作代碼：

changeCat:function(catName){
    domObject.$positionsDiv.slideToggle(function(){
        domObject.$positionsDiv.html('');
        let yourCategories = getSubFolders(catName+"/");

        if(catName==='s'){
            tSCat.drawCats(yourCategories);

        } else if(catName==='g'){
            tGCat.drawCats(yourCategories);
        }
        setTimeout(function (){
            domObject.$positionsDiv.slideToggle(function(){
                resizeCanvas()
            });
        }, 1)

    });
},

真正讓我困惑的是，如果我控制台記錄目標 div 的高度。

• 我希望最后調用的控制台日志（“高度 5”）首先調用。
• div 高度（“height 3”）是在我調用第二個切換之前完全填充的 div 的高度（那么為什么它不起作用？）。

非工作代碼（無超時，帶有控制台日志）

changeCat:function(catName){
    domObject.$positionsDiv.slideToggle(function(){
        console.log('height 1: ' + domObject.$positionsDiv.height())
        domObject.$positionsDiv.html('');
        console.log('height 2: ' + domObject.$positionsDiv.height())
        let yourCategories = getSubFolders(catName+"/");

        if(catName==='s'){
            tSCat.drawCats(yourCategories);

        } else if(catName==='g'){
            tGCat.drawCats(yourCategories);
        }

        console.log('height 3: ' + domObject.$positionsDiv.height())
            domObject.$positionsDiv.slideToggle(function(){
                console.log('height 4: ' + domObject.$positionsDiv.height())
                resizeCanvas()
            });
    });
    console.log('height 5: ' + domObject.$positionsDiv.height())
},

控制台日志按此順序返回，具有以下值：

height 5: 359.333 
height 1: 2214 
height 2: 0
height 3: 3744
height 4: 324

Answer 1

“傳統”方式是將“顯示”代碼放在“隱藏”回調中：

 $("#d").slideToggle(function() { $(this).html("a<br/>b<br/>c<br/>"); $(this).slideToggle() })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id='d'> 1<br/>2<br/>3<br/> </div>

在 1 毫秒超時后調用“show”時發生的情況與立即調用“show”時發生的情況相同。

.slideToggle()使用.animate()並且同一 DOM 節點上的每個.animate()調用都會排隊。 那么會發生什么：

• 你的“隱藏”開始
• “演出”已排隊
• 隱藏完成，回調被調用，在“不可見”時設置內容
• 演出自動出隊

 $("#d").slideToggle(function() { $(this).html("a<br/>b<br/>c<br/>"); }); $(this).slideToggle()

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id='d'> 1<br/>2<br/>3<br/> </div>