स्वत:

Question

पर jQuery एनिमेट ऊंचाई मेरे पास 125px की ऊंचाई वाला उल है। जब कोई उपयोगकर्ता उल को घुमाता है तो मैं चाहता हूं कि ऊंचाई ऊंचाई ऑटो पर एनिमेटेड हो। और जब उपयोगकर्ता उल से बाहर हो जाता है कि यूएल कॉलपेज 125px पर फिर से होता है।

$('.box .box-overflow ul').hover(function() { 
     $(this).animate({ 
      height: '100%' 
     }, 400); 
    }, function() { 
     $(this).animate({ 
      height: '125px' 
     }, 400); 
    }); 

यह काम कर रहे हैं, लेकिन जब कोई उपयोगकर्ता उल में आता है उसे विस्तृत लेकिन एक अच्छा एनिमेटेड प्रभाव के साथ नहीं?

क्या कोई मेरी मदद कर सकता है? :) हॉवर पर इस तरह

Answer 1

आप scrollHeight साथ यह कर सकते हैं।

$('ul').hover(function(){ 
    $(this).animate({ 
    height: $(this)[0].scrollHeight+'px' 
    }, 400); 
}, function(){ 
    $(this).animate({ 
    height: '125px' 
    }, 400); 
}); 

Answer 2

कोशिश कुछ:

var height = $(this).css('height','auto').height(); // get real height 
$(this).css('height','125px'); // return current state; 
$(this).animate({height: height+'px'}, 400); 

activivty पहले दो लाइनों में उपयोगकर्ता द्वारा नहीं देखा मधुमक्खी चाहिए, लेकिन आप अपने यूएल की वास्तविक ऊंचाई प्राप्त कर सकते हैं। यदि आप अंतिम ऊंचाई जानते हैं तो आप केवल फैंसी स्लाइडिंग प्रभाव बना सकते हैं।

काम कर उदाहरण यहाँ है: http://jsfiddle.net/axpFk/

Answer 3

इस कहीं और प्रकाशित किया गया था, लेकिन मैं अपनी उपयोगी तरह यहाँ भी लग रहा है: मैं एक छोटे से प्लगइन है कि इस समस्या के साथ संबंधित किया - (कुछ के साथ, काफी सरल होना चाहिए डार्सी क्लार्क की विधि है जो here प्रकाशित किया गया है के आधार पर, आईएमओ) बहुत जरूरी सुधार। बस प्लग और jQuery के लिए खेलते हैं:

https://github.com/azaslavsky/jQuery-Animate-Auto-Plugin