IE10和11，jQuery动画的意外行为和溢出

Question

I used an animation which expands/collapses a form on an event. Works fine in FF, Chrome and Safari but IE10+ behaves unexpectedly and disturbs the alignment.

HTML:

<div id="w_oCExpandFormWrapper" style="position:absolute !important;">
    <div  class="w_oInput2" id="w_oCFirstField">
        <input type="hidden" id="w_oCRecomendTxt1"  />
    </div>
    <input id="w_oCRecommendArtficialButton" type="button" value="RECOMMEND"/>
    <textarea class="w_oInput3" id="w_oCRecomendTxt2" placeholder="...?"></textarea><br/>
    <div  class="w_oInput2" id="w_oCThirdField">
        <input type="hidden" id="w_oCRecomendTxt3" />
    </div>
    <input type="text" class="w_oInput2" id="w_oCRecomendTxt3" placeholder="..."/><br/>
    <input id="w_oCRecommendButton" type="button"  style="margin-left: 239px;" value="RECOMMEND"/>
</div>

JavaScript:

to expand/collapse

//Expand
$('#w_oHExpandFormWrapper').css({"height":"auto","overflow":"auto"})
//Collapse
$('#w_oHExpandFormWrapper').css({"height":"20px","overflow":"hidden"})

and for animation is.

$('#w_oHExpandFormWrapper').animate({"height":"20px","overflow":"hidden"},"fast");

Please help!

Answer 1

This animation code is based on Animate element to auto height with jQuery . Press the Trigger button to cycle through the jQuery function calls that mutate the styles in the snippet.

Your form wrapper id is different in the html and js in the question. The auto height you had wasn't working in Chrome either, but after 5 years who knows if this is still an issue, but you just edited the question to add a character...

 let count = 0; $('#trigger').on('click', function() { if (count == 0) { //Expand console.log('expand'); $('#w_oHExpandFormWrapper').css({ "height": "auto", }); } else if (count == 1) { //Collapse console.log('collapse'); $('#w_oHExpandFormWrapper').css({ "height": "20px", }); } else if (count == 2) { //Expand Animation console.log('expand animation'); $('#w_oHExpandFormWrapper').animate({ "height": $( '#w_oHExpandFormWrapper' )[0].scrollHeight, }, "fast"); } else if (count == 3) { //Collapse Animation console.log('collapse animation'); $('#w_oHExpandFormWrapper').animate({ "height": "20px", }, "fast"); } count = (count + 1) % 4; }); 

 #w_oHExpandFormWrapper { background: red; top: 40px; min-width: 200px; overflow: hidden; height: 20px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="trigger">Trigger</button> <div id="w_oHExpandFormWrapper" style="position:absolute!important;"> <div class="w_oInput2" id="w_oCFirstField"> <input type="hidden" id="w_oCRecomendTxt1" /> </div> <input id="w_oCRecommendArtficialButton" type="button" value="RECOMMEND" /> <textarea class="w_oInput3" id="w_oCRecomendTxt2" placeholder="...?"></textarea><br/> <div class="w_oInput2" id="w_oCThirdField"> <input type="hidden" id="w_oCRecomendTxt3" /> </div> <input type="text" class="w_oInput2" id="w_oCRecomendTxt3" placeholder="..." /><br/> <input id="w_oCRecommendButton" type="button" style="margin-left: 239px;" value="RECOMMEND" /> </div>