Come implementare jquery come slideDown() in zepto

Question

Sto usando la libreria zepto per il mio sito web mobile. Recentemente ho appreso che zepto non ha il plugin slideDown() come jquery. Mi piacerebbe implementare lo stesso per zepto.

Ho provato uno su jsfiddle (http://jsfiddle.net/goje87/keHMp/1/). Qui non si anima mentre mostra l'elemento. Lampeggia appena. Come posso portare l'animazione?

PS: Non riesco a fornire un'altezza fissa perché applicherei questo plugin agli elementi la cui proprietà di altezza non sarebbe nota.

Grazie in anticipo !!

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

Questo ha funzionato per me:

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

Il plugin Transizione diapositiva Zepto aggiungi a Zepto.js le funzioni sotto:

slideDown();

slideUp();

slideToggle();

Answer 3

risposta di Speransky era disponibile, e sto offrendo un'alternativa semplificata per un elenco di navigazione comuni discesa, e separato in slideUp e slideDown su jsfiddle: 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

Questo potrebbe funzionare per quello hai bisogno di: https://github.com/NinjaBCN/zepto-slide-transition