javascript - 如何在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 添加了以下功能：

滑下（）;

向上滑动（）;

滑动切换（）；

Answer 3

Speransky 的回答很有帮助，我为常见的下拉导航列表提供了一个简化的替代方案，并在 jsfiddle 上分为 slideUp 和 slideDown：http: //jsfiddle.net/kUG3U/1/

$.fn.slideDown = function (duration) {
    // show element if it is hidden (it is needed if display is none)
    this.show();

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

    // set initial css for animation
    this.css({
        height: 0
    });

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

Answer 4

这可以满足您的需要： https ://github.com/NinjaBCN/zepto-slide-transition