zepto

Question

में स्लाइडडाउन() जैसे jquery को कार्यान्वित करने के लिए मैं अपनी मोबाइल वेबसाइट के लिए zepto लाइब्रेरी का उपयोग कर रहा हूं। मैंने हाल ही में सीखा है कि zepto में jquery जैसे slideDown() प्लगइन नहीं है। मैं ज़ेप्टो के लिए इसे लागू करना चाहता हूं।

मैंने jsfiddle (http://jsfiddle.net/goje87/keHMp/1/) पर एक की कोशिश की है। यहां तत्व दिखाते समय यह एनिमेट नहीं होता है। यह सिर्फ नीचे चमकती है। मैं एनीमेशन कैसे लाऊं?

पीएस: मैं एक निश्चित ऊंचाई प्रदान नहीं कर सकता क्योंकि मैं इस प्लगइन को उन तत्वों पर लागू कर रहा हूं जिनकी ऊंचाई संपत्ति ज्ञात नहीं होगी।

सलाह में धन्यवाद !!

Answer 1

डेमो: http://jsfiddle.net/6zkSX/5

जावास्क्रिप्ट:

(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

यह मेरे लिए काम किया:

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

zepto स्लाइड संक्रमण प्लगइन bellow कार्यों Zepto.js में जोड़ें:

स्लाइडडाउन();

स्लाइडअप();

स्लाइड टॉगल();

Answer 3

Speransky के जवाब मददगार था, और मैं एक आम ड्रॉप-डाउन नेविगेशन सूची के लिए एक सरल विकल्प की पेशकश कर रहा हूँ, और jsfiddle पर slideUp और slideDown में विभाजित: 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

यह वही है के लिए काम करेंगे आपको चाहिए: https://github.com/NinjaBCN/zepto-slide-transition