Question

我使用了一个动画来扩展/折叠事件中的表单。在FF，Chrome和Safari中运行良好，但IE10 +出现意外行为并干扰对齐。

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的：

展开/折叠

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

和动画是。

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

请帮忙！

Answer 1

此动画代码基于Animate element to auto height with jQuery。按下“触发”按钮，以循环遍历jQuery函数调用，从而使代码段中的样式发生变化。

您的表单包装ID在问题中的html和js中有所不同。您以前的自动高度也无法在Chrome中使用，但是5年后，谁知道这仍然是一个问题，但是您只是编辑了问题以添加字符...

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>

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

1 个答案: