javascript - 使用 fadeIn 和 fadeOut 交换 View 时如何防止反弹

Question

长话短说:

容器有一个高度为 10 的 View 。

Height == Container(10) + Static(10) == 20

然后我更改容器中的 View ，其高度为 50

1) 向容器添加新 View :

Height == OldView(10) + NewView(50) + Static(10) == 70

2) 从容器中移除旧 View

Height == NewView(50) + Static(10) = 60

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

---

我有一个根据复选框的状态交换 div 的容器

在它下面是另外三个静态 View (在本例中为“Timer Precision”、“Hide Progress”和“Shape”控件)

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

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

但我的问题是这段代码使静态 View 跳转。

例如，如果您选中该复选框，它会首先添加调查问题，这会使静态 View 向下移动，然后使日期字段消失，从而使静态 View 恢复原状。

我想要的只是将静态 View 一次移动，根据即将到来的 View 向下或向上移动。

逻辑上对我来说，这意味着我需要 fadeIn 和 fadeOut 同时执行，但我认为这不可能吗？

或者是否有另一种方法可以更好地做到这一点？

Answer 1

问题:

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
});