如何在zepto中實現像slideDown（）這樣的jquery

Question

我正在爲我的移動網站使用zepto庫。我最近了解到，zepto沒有像jquery這樣的slideDown()插件。我想爲zepto實現相同的功能。

我試過jsfiddle（http://jsfiddle.net/goje87/keHMp/1/）。這裏顯示元素時不顯示動畫。它只是閃爍。我如何引入動畫？

PS：我無法提供一個固定的高度，因爲我將這個插件應用到其高度屬性不知道的元素。

感謝advace！

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幻燈片過渡插件添加到波紋管Zepto.js功能：

slideDown（）;

slideUp（）;

slideToggle（）;

Answer 3

斯佩蘭斯基的答案是有幫助的，我提供了一個共同的下拉導航列表簡化選擇，並在的jsfiddle分成效果基本show和了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