zeptoでslideDown（）のようにjqueryを実装する方法

Question

私のモバイルWebサイトにzeptoライブラリを使用しています。私は最近、zeptoにjqueryのようなslideDown()プラグインがないことを知った。私は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スライドトランジションプラグインが怒鳴るの機能をZepto.jsに追加：

slideDown（）;

slideUp（）;

slideToggle（）;

Answer 3

スペランスキーの答えは参考になりました、と私は一般的なドロップダウンナビゲーションリストのための単純化された選択肢を提供し、そして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