Comment mettre en œuvre jquery comme slideDown() dans zepto

Question

J'utilise zepto bibliothèque pour mon site Web mobile. J'ai récemment appris que zepto n'a pas slideDown() plugin comme jquery. Je voudrais mettre en œuvre la même chose pour zepto. J'ai essayé un sur jsfiddle (http://jsfiddle.net/goje87/keHMp/1/). Ici, il ne s'anime pas en montrant l'élément. Ça ne fait que clignoter. Comment puis-je apporter l'animation? PS: Je ne peux pas fournir une hauteur fixe car j'appliquerais ce plugin aux éléments dont la propriété height ne serait pas connue.

Merci à l'avance !!

Answer 1

Démo: 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

Cela a fonctionné pour moi:

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

Le plugin Slide Transition Zepto ajouter à Zepto.js les fonctions ci-dessous:

slideDown();

slideUp();

slideToggle();

Answer 3

réponse de Speranski utile, et je propose une alternative simplifiée pour une liste de navigation déroulante commune, et séparé en slideUp et slideDown sur 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

Cela fonctionnerait pour ce vous avez besoin de: https://github.com/NinjaBCN/zepto-slide-transition