javascript – 如何在zepto中实现jQuery如slideDown()

我正在为我的移动网站使用zepto库.我最近才知道zepto没有像 jquery一样的slideDown()插件.我想为zepto执行相同的操作.

我在jsfiddle(http://jsfiddle.net/goje87/keHMp/1/)上尝试过一个.这里不显示元素的动画.它只是闪烁下来如何引入动画？

PS：我不能提供一个固定的高度,因为我将这个插件应用到高度属性不知道的元素.

感谢在advace！

解决方法

演示： http://jsfiddle.net/6zkSX/5

JavaScript的：

(function ($) {
  $.fn.slideDown = function (duration) {    
    // get old position to restore it then
    var position = this.css('position');

    // show element if it is hidden (it is needed if display is none)
    this.show();

    // place it so it displays as usually but hidden
    this.css({
      position: 'absolute',visibility: 'hidden'
    });

    // get naturally height
    var height = this.height();

    // set initial css for animation
    this.css({
      position: position,visibility: 'visible',overflow: 'hidden',height: 0
    });

    // animate to gotten height
    this.animate({
      height: height
    },duration);
  };
})(Zepto);

$(function () {
  $('.slide-trigger').on('click',function () {
    $('.slide').slideDown(2000);
  });
});​
​