如何在zepto中实现类似slideDown()的jquery答案

【问题标题】：How to implement jquery like slideDown() in zepto如何在zepto中实现类似slideDown()的jquery
【发布时间】：2012-08-29 18:41:54
【问题描述】：

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

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

PS：我无法提供固定高度，因为我会将这个插件应用于高度属性未知的元素。

提前谢谢！！

【问题讨论】：

标签： javascript jquery html slidedown zepto

【解决方案1】：

这将满足您的需求： https://github.com/NinjaBCN/zepto-slide-transition

【讨论】：

这将是评论，您可以评论任何具有指定声誉的帖子

【解决方案2】：

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);
};

【讨论】：

只是一个小修复：如果元素有垂直填充，第一次调用后高度计算不正确，导致对象变大。为防止这种情况，请使用：var height = this.height() - parseInt(this.css('padding-top')) - parseInt(this.css('padding-bottom'));

【解决方案3】：

这对我有用：

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

Zepto Slide Transition 插件为 Zepto.js 添加了以下功能：

slideDown();

slideUp();

slideToggle();

【讨论】：

这是一个更好的实现
此 repo 已被删除或设为私有。 @kennersky 提到的 repo 仍然是开放的。

【解决方案4】：

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

【讨论】：