javascript - 在使用fadeIn和fadeOut交换 View 时如何防止跳动

TL; DR：

容器的视图高度为10。


  高度==容器（10）+静态（10）== 20


然后，我在高度为50的容器中更改视图

1）将新视图添加到容器：


  高度== OldView（10）+ NewView（50）+静态（10）== 70


2）从容器中删除旧视图


  高度== NewView（50）+ Static（10）= 60


因此，高度从20-> 70-> 60产生反弹。
我想直接从20-> 60走



我有一个交换div的容器，具体取决于复选框的状态

它下面是三个静态视图（在这种情况下，是“计时器精度”，“隐藏进度”和“形状”控件）





我用这个交换容器中的div：

function showSurveyIf(isChecked)
{
  if( isChecked ) {
    $("#surveyDeathContainer").fadeIn(100);
    $("#specifyDeathContainer").fadeOut(100);
  } else {
    $("#surveyDeathContainer").fadeOut(100);
    $("#specifyDeathContainer").fadeIn(100);
  }
}

但是我的问题是这段代码使静态视图跳了起来。

例如，如果您选中复选框，它将首先添加调查问题，这将使静态视图下降，然后使日期字段消失，从而使静态视图恢复。

我想拥有的只是根据要移动的静态视图一次，向下或向上移动静态视图。

从逻辑上讲，这意味着我需要fadeIn和fadeOut在相同的确切时间执行，但是我认为这不可能吗？

还是有另一种完全可以更好地做到这一点的方法？

最佳答案

问题：

jQuery fadeIn和fadeOut方法实际上操纵css display属性-这就是为什么静态元素会反弹的原因

解决方案：

// make the element invisible - display should still be with 'block' value
$("#specifyDeathContainer").animate({opacity: 0.0001}, 100, function()
{
    $(this).fadeOut(); // now - make display -> 'none'
    $("#surveyDeathContainer").fadeIn(100); // and make the new element visible with animation
});

关于javascript - 在使用fadeIn和fadeOut交换 View 时如何防止跳动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41843518/