Jak zaimplementować jquery jak slideDown() w zepto

Question

Używam biblioteki zepto na mojej stronie mobilnej. Niedawno dowiedziałem się, że zepto nie ma wtyczki slideDown(), takiej jak jquery. Chciałbym wprowadzić to samo dla zepto.

Próbowałem jednego na jsfiddle (http://jsfiddle.net/goje87/keHMp/1/). Tutaj nie animuje się, pokazując element. Po prostu miga. Jak wprowadzić animację?

PS: Nie mogę podać stałej wysokości, ponieważ stosowałbym tę wtyczkę do elementów, których właściwość height nie byłaby znana.

Dzięki za awans!

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

Ten pracował dla mnie:

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

Wtyczka Przejście slajdów Zepto dodać do Zepto.js funkcje poniżej:

slideDown();

slideUp();

slideToggle();

Answer 3

odpowiedź Speransky był pomocny, a ja oferując uproszczoną alternatywę dla listy nawigacyjnej wspólny rozwijanego i rozdziela na slideUp i slideDown na 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

to będzie działać za co potrzebujesz: https://github.com/NinjaBCN/zepto-slide-transition