手风琴关闭动画无效。它打开（与动画）和关闭（没有动画）

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>