mobil web sitesi için zepto kitaplığı kullanıyorum zepto

Question

yılında slideDown() gibi jquery nasıl uygulanır. Yakın zamanda zepto'nun jquery gibi slideDown() eklentisine sahip olmadığını öğrendim. Zepto için aynısını uygulamak istiyorum.

ben jsfiddle (http://jsfiddle.net/goje87/keHMp/1/) bir tane çalıştık. Burada öğeyi gösterirken animasyon yapmaz. Sadece yanıp söner. Animasyonu nasıl getirebilirim?

Not: Kimin yükseklik özelliği bilinen olmaz unsurları için bu eklentiyi uygulamak olacaktır çünkü sabit bir yükseklik sağlayamaz.

Advace'da teşekkürler!

Answer 1

Demo: 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

Bu benim için çalıştı

:

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

Zepto Slayt Geçişi eklentisi feryat fonksiyonlarını Zepto.js eklemek:

slideDown();

slideUp();

slideToggle();

Answer 3

Speransky cevabı yardımcı oldu ve ben ortak bir açılır navigasyon listesi için basitleştirilmiş alternatif teklif ediyorum ve jsfiddle üzerinde slideUp ve slideDown ayrılır: 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

Bu ne için çalışacak ihtiyacınız: https://github.com/NinjaBCN/zepto-slide-transition