如何在zepto中实现像slideDown()这样的jquery

Question

我在我的移动网站上使用zepto库.我最近了解到zepto没有slideDown()像jquery 这样的插件.我想为zepto实现相同的功能.

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

PS:我无法提供固定高度,因为我将此插件应用于其高度属性不可知的元素.

谢谢!

Answer 1

演示: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);
  });
});?
?

Answer 2

这对我有用:

https://github.com/Ilycite/zepto-slide-transition

Zepto Slide Transition插件为Zepto.js增加了以下功能:

滑下();

向上滑动();

的slideToggle();