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

How to implement jquery like slideDown() in zepto

本文关键字：jquery slideDown zepto 实现      更新时间：2023-09-26

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

我在jsfiddle上试过一个(http://jsfiddle.net/goje87/keHMp/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);
  });
});​
​

这对我有效：

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

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

slideDown（）；

slideUp（）；

slideToggle（）；

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

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

相关文章：