手風琴關閉動畫無效。它打開（與動畫）和關閉（沒有動畫）

Question

我很新的JavaScript，所以這可能是一個愚蠢的問題。

我打開的動畫效果很好，但密切的動畫不起作用/起火。它應該就像倒轉動畫一樣簡單，但這似乎不起作用。
我必須在這裏失去一些東西。有一個更好的方法嗎？
一直想弄明白這一點。

HTML

<div class="divTable"> 
    <div class="divTableBody"> 
    <div class="divTableRow"> 
     <div class="divTableCell"> 
     <button type="button" id="id" onclick="btnDetails_Click('id')"> 
      <p id="id-ButtonText">Details &#9660;</p> 
     </button> 
     </div> 
     <div class="divTableCell"> 
     <p>Name</p> 
     </div> 
     <div class="divTableCell"> 
     <p>Details</p> 
     </div> 
    </div> 
    <div class="divTableFoot" style="display:none" id="id-DetailsPanel"> 
     <div class="divTableCell" style="display:flex; height:0; overflow:hidden" id="id-DetailsPanel2"> 
     <div style="margin-right:20px"> 
      <img style="height:400px" src="http://via.placeholder.com/200x400" /> 
     </div> 
     <div style="width:auto"> 
      <p>Description</p> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

CSS

/* DivTable.com */ 
.divTable { 
    display: table; 
    width: 100%; 
} 

.divTableRow { 
    display: table-row; 
} 

.divTableHeading { 
    background-color: #EEE; 
    display: table-header-group; 
} 

.divTableCell, 
.divTableHead { 
    border: 1px solid #999999; 
    display: table-cell; 
    padding: 3px 10px; 
} 

.divTableHeading { 
    background-color: #EEE; 
    display: table-header-group; 
    font-weight: bold; 
} 

.divTableFoot { 
    width:100%; 
} 

.divTableBody { 
    display: table-row-group; 
} 

的JavaScript

function btnDetails_Click(id) { 
    document.getElementById("id-DetailsPanel").style = "display:inherit"; 
    document.getElementById("id").setAttribute("onclick", "btnDismiss_Click('id')"); 
    document.getElementById("id-ButtonText").innerHTML = "Details ▲"; 
    expand(id) 
} 

function btnDismiss_Click(id) { 
    contract(id) 
    document.getElementById("id-ButtonText").innerHTML = "Details ▼"; 
    document.getElementById("id").setAttribute("onclick", "btnDetails_Click('id')"); 
    document.getElementById("id-DetailsPanel").style = "display:none"; 
} 

function expand(id) { 
    var detailsBox = document.getElementById("id-DetailsPanel2"); 
    var boxHeight = 0; 

    var int = setInterval(animate, 8); 

    function animate() { 
    if (boxHeight == 425) { 
     clearInterval(int); 
    } else { 
     boxHeight = boxHeight + 25; 
     detailsBox.style.height = boxHeight + 'px'; 
    } 
    } 
} 

function contract(id) { 
    var detailsBox = document.getElementById("id-DetailsPanel2"); 
    var boxHeight = 425; 

    var int = setInterval(animate, 8); 

    function animate() { 
    if (boxHeight == 0) { 
     clearInterval(int); 
    } else { 
     boxHeight = boxHeight - 25; 
     detailsBox.style.height = boxHeight + 'px'; 
    } 
    } 
} 

這裏的的jsfiddle：https://jsfiddle.net/1zryo2Lp/

Answer 1

因爲在此之前的setInterval有一個通道執行document.getElementById("id-DetailsPanel").style = "display:none";發生。一個簡單的解決將是移動display:none行之後clearInterval(int);

function btnDetails_Click(id) { 
 
    document.getElementById("id-DetailsPanel").style = "display:inherit"; 
 
    document.getElementById("id").setAttribute("onclick", "btnDismiss_Click('id')"); 
 
    document.getElementById("id-ButtonText").innerHTML = "Details ▲"; 
 
    expand(id) 
 
} 
 

 
function btnDismiss_Click(id) { 
 
    contract(id) 
 
    document.getElementById("id-ButtonText").innerHTML = "Details ▼"; 
 
    document.getElementById("id").setAttribute("onclick", "btnDetails_Click('id')"); 
 
    // document.getElementById("id-DetailsPanel").style = "display:none"; 
 
} 
 

 
function expand(id) { 
 
    var detailsBox = document.getElementById("id-DetailsPanel2"); 
 
    var boxHeight = 0; 
 

 
    var int = setInterval(animate, 8); 
 

 
    function animate() { 
 
    if (boxHeight == 425) { 
 
     clearInterval(int); 
 
    } else { 
 
     boxHeight = boxHeight + 25; 
 
     detailsBox.style.height = boxHeight + 'px'; 
 
    } 
 
    } 
 
} 
 

 
function contract(id) { 
 
    var detailsBox = document.getElementById("id-DetailsPanel2"); 
 
    var boxHeight = 425; 
 

 
    var int = setInterval(animate, 8); 
 

 
    function animate() { 
 
    if (boxHeight == 0) { 
 
     clearInterval(int); 
 
     document.getElementById("id-DetailsPanel").style = "display:none"; 
 
    } else { 
 
     boxHeight = boxHeight - 25; 
 
     detailsBox.style.height = boxHeight + 'px'; 
 
    } 
 
    } 
 
}

.divTable { 
 
    display: table; 
 
    width: 100%; 
 
} 
 

 
.divTableRow { 
 
    display: table-row; 
 
} 
 

 
.divTableHeading { 
 
    background-color: #EEE; 
 
    display: table-header-group; 
 
} 
 

 
.divTableCell, 
 
.divTableHead { 
 
    border: 1px solid #999999; 
 
    display: table-cell; 
 
    padding: 3px 10px; 
 
} 
 

 
.divTableHeading { 
 
    background-color: #EEE; 
 
    display: table-header-group; 
 
    font-weight: bold; 
 
} 
 

 
.divTableFoot { 
 
    width:100%; 
 
} 
 

 
.divTableBody { 
 
    display: table-row-group; 
 
}

<div class="divTable"> 
 
    <div class="divTableBody"> 
 
    <div class="divTableRow"> 
 
     <div class="divTableCell"> 
 
     <button type="button" id="id" onclick="btnDetails_Click('id')"> 
 
      <p id="id-ButtonText">Details &#9660;</p> 
 
     </button> 
 
     </div> 
 
     <div class="divTableCell"> 
 
     <p>Name</p> 
 
     </div> 
 
     <div class="divTableCell"> 
 
     <p>Details</p> 
 
     </div> 
 
    </div> 
 
    <div class="divTableFoot" style="display:none" id="id-DetailsPanel"> 
 
     <div class="divTableCell" style="display:flex; height:0; overflow:hidden" id="id-DetailsPanel2"> 
 
     <div style="margin-right:20px"> 
 
      <img style="height:400px" src="http://via.placeholder.com/200x400" /> 
 
     </div> 
 
     <div style="width:auto"> 
 
      <p>Description</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>