Javascript 如何在使用fadeIn和fadeOut交换视图时防止反弹

TL；博士：

容器的视图高度为10

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

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

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

高度==旧视图（10）+新视图（50）+静态视图（10）=70

2） 从容器中删除旧视图

高度==新视图（50）+静态（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
});

---

因此，问题实际上是使用了

fadeIn

和

fadeOut

，直到不透明度完全转换，才真正删除/添加div，从而导致反弹

---

通过使用

show

和

hide

来代替，不会出现反弹

你可以发布一个小提琴来显示问题吗？我今晚会尽量找时间这样做，不过我希望我对问题的描述应该足够充分。将在tl中编辑；dr在这种情况下，

这个

是什么？nvm找到了它^^它是

指定的路径容器

，但现在的问题是，在将不透明度设置为0（为什么将其设置为0.0001？）后，需要将其设置回1？现在玩它，实际上它根本不能解决高度变化的问题：\