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

Posted 2023-02-22

【中文标题】如何在zepto中实现类似slideDown()的jquery

【英文标题】：How to implement jquery like slideDown() in zepto

【发布时间】：2012-08-29 18:41:54

【问题描述】：

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

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

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

提前谢谢！！

【参考方案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);
  );
);​
​