How to implement jquery like slideDown() in zepto

Question

I am using zepto library for my mobile web site. I have recently learnt that zepto does not have slideDown() plugin like jquery. I would like to implement the same for zepto.

I have tried one on jsfiddle (http://jsfiddle.net/goje87/keHMp/1/). Here it does not animate while showing the element. It just flashes down. How do I bring in the animation?

PS: I cannot provide a fixed height because I would be applying this plugin to the elements whose height property would not be known.

Thanks in advace!!

Danil Speransky · Accepted Answer · 2012-09-05T05:52:20.453

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);
  });
});

score 5 · Answer 2 · edited Jun 20 '20 at 09:12

5

This worked for me:

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

The Zepto Slide Transition plugin add to Zepto.js the functions bellow :

slideDown();

slideUp();

slideToggle();

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 21 '13 at 01:48

rauff

173
4
10

This is a much better implementation – Zack Shapiro Aug 30 '13 at 02:28
This repo has either been deleted or made private. The repo mentioned by @kennersky is still open. – Nautatava Navlakha May 26 '20 at 06:59

score 1 · Answer 3 · answered Aug 04 '13 at 13:40

Speransky's answer was helpful, and I'm offering a simplified alternative for a common drop-down navigation list, and separated into slideUp and slideDown on 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);
};

Just a small fix: If the element has vertical padding, after the first call the height is incorrectly calculated, resulting in a bigger object. To prevent this, use: `var height = this.height() - parseInt(this.css('padding-top')) - parseInt(this.css('padding-bottom'));` — andreszs, Mar 08 '15 at 23:56

score 1 · Answer 4 · answered Nov 10 '15 at 02:08

1

This would work for what you need: https://github.com/NinjaBCN/zepto-slide-transition

answered Nov 10 '15 at 02:08

kennersky

21
3

This would be comment, you can comment on any post with specified reputation – Amarjit Nov 10 '15 at 02:29

How to implement jquery like slideDown() in zepto

4 Answers4