Làm thế nào để thực hiện jquery như slideDown() trong zepto

Question

Tôi đang sử dụng thư viện zepto cho trang web di động của mình. Gần đây tôi đã biết rằng zepto không có các plugin slideDown() như jquery. Tôi muốn thực hiện tương tự cho zepto.

Tôi đã thử một lần trên jsfiddle (http://jsfiddle.net/goje87/keHMp/1/). Ở đây nó không hoạt hình khi hiển thị phần tử. Nó chỉ nhấp nháy. Làm thế nào để mang lại hình ảnh động?

PS: Tôi không thể cung cấp chiều cao cố định vì tôi sẽ áp dụng plugin này cho các phần tử có đặc tính chiều cao sẽ không được biết.

Cảm ơn bạn đã ủng hộ !!

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

này đã làm việc cho tôi:

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

Các Zepto Plugin Trượt chuyển thêm vào Zepto.js các chức năng dưới đây:

slideDown();

slideUp();

slideToggle();

Answer 3

câu trả lời Speransky là hữu ích, và tôi đang cung cấp một giải pháp đơn giản cho một danh sách chuyển hướng chung thả xuống, và tách thành slideUp và slideDown trên 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

này sẽ làm việc cho những gì bạn cần: https://github.com/NinjaBCN/zepto-slide-transition