Javascript 平滑切换滑动（向上）问题

你能不能看一下，让我知道为什么我不能在我的布局上有一个平滑的幻灯片？我的意思是，当滑梯抓住内井（.login）时，会发生跳跃

---

谢谢

您看到的问题是由bootstrap.css中的最小高度样式引起的。最小高度是防止油井坍塌超过20px。当油井膨胀时，它实际上立即显示出20px的高度。然而，这是一种奇怪的行为，只有在它崩溃的时候才会被注意到

.well {
  min-height: 20px;  <--- THIS STYLE
  padding: 19px;
  margin-bottom: 20px;
  background-color: @well-bg;
  border: 1px solid @well-border;
  border-radius: @border-radius-base;
  .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
  blockquote {
    border-color: #ddd;
    border-color: rgba(0,0,0,.15);
  }
}

虽然这样做有效，但我建议对well div应用另一个类，称为wellnomnheight

.well.wellNoMinHeight
{
 min-height:initial;   
}

---

我认为问题在于它试图从div向下滑动，但是div的形状很笨拙（因为well类）。这是我的解决方案，使用jquery动画而不是滑动切换

以下是我使用的JavaScript：

var flip = 0;

$("#login").click(function () {
    if (flip++ % 2 === 0) {
        $( ".login" ).animate({
            'display': 'block',
            'margin-top': "20px"
        }, 300 );
        $( ".login" ).show(200); 
    }
    else {
        $( ".login" ).hide(200);
        $( ".login" ).animate({
            'display': 'block',
            'margin-top': "0"
        }, 300 ); 
    }
});

---

谢谢cgatian，这是完美的解释！很高兴能帮上忙。我喜欢那里正在进行的CSS3动画，非常热。

div .well
{
 min-height:initial;   
}

.well.wellNoMinHeight
{
 min-height:initial;   
}

var flip = 0;

$("#login").click(function () {
    if (flip++ % 2 === 0) {
        $( ".login" ).animate({
            'display': 'block',
            'margin-top': "20px"
        }, 300 );
        $( ".login" ).show(200); 
    }
    else {
        $( ".login" ).hide(200);
        $( ".login" ).animate({
            'display': 'block',
            'margin-top': "0"
        }, 300 ); 
    }
});