9

モバイルWebサイトにzeptoライブラリを使用しています。slideDown()最近、zeptoにはjqueryのようなプラグインがないことを知りました。zeptoにも同じように実装したいと思います。

jsfiddle（http://jsfiddle.net/goje87/keHMp/1/）で試してみました。ここでは、要素を表示している間はアニメーション化されません。点滅するだけです。アニメーションを取り込むにはどうすればよいですか？

PS：高さプロパティが不明な要素にこのプラグインを適用するため、固定の高さを提供できません。

よろしくお願いします!!

4

4 に答える 4

19

デモ： 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);
  });
});​
​
于 2012-09-05T05:19:48.553 に答える
5

これは私のために働いた：

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

Zepto Slide Transitionプラグインは、Zepto.jsに次の機能を追加します。

slideDown（）;

上にスライドします（）;

slideToggle（）;

于 2013-07-21T01:48:53.150 に答える
1

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);
};
于 2013-08-04T13:40:01.173 に答える
1

これはあなたが必要とするもののために働くでしょう： https ：//github.com/NinjaBCN/zepto-slide-transition

于 2015-11-10T02:08:10.973 に答える