使用Transit js的jQuery slideUp和slideDown

Question

现在，我正在使用Jquery来实现此效果，但是动画不流畅

$("#slideToggle").click(function () {

    $('#contatti').slideUp();

});

这对于CSS

#contatti {
   width: 100%;
   position: absolute;
   bottom: 0;
   display: none;
}

http://jsfiddle.net/p99FM/

有人可以让我朝正确的方向前进，以与Transit取得相同的结果吗？ 谢谢 ：）

Answer 1

好吧，我建议您使用css3过渡属性：

.slideup {
   width: 100%;
   height:0;
   -webkit-transition: height 2s;
   -moz-transition: height 2s;
   -o-transition: height 2s;
   transition: height 2s;
}

然后在jQuery中使用toggleClass()方法：

$("#slideToggle").click(function () {
    $('#contatti').toggleClass('slideup');
});

Answer 2

使用jQuery Transit，在过渡开始之前，我已经成功地动态设置了高度和溢出。

 $('.slide')
      .css('height', $alert.height())
      .css('overflow', 'hidden')
      .transition({height: '0px'});