बूटस्ट्रैप के कैरोसेल (v2.3.2)

Question

पर ऊंचाई परिवर्तन को एनिमेट करें मैं बूटस्ट्रैप के कैरोसेल का उपयोग करने की कोशिश कर रहा हूं ताकि समान ऊंचाई न हो। ब्राउज़र चौड़ाई के आधार पर ऊंचाई अलग-अलग होगी, और कैरोसेल के नीचे सामग्री होगी। मैं स्लाइड्स के बीच ऊंचाई परिवर्तन को एनिमेट करने के लिए सीएसएस का उपयोग करना चाहता हूं। किसी मित्र से कुछ मदद के साथ मैं लगभग फ़ायरफ़ॉक्स (पहली स्लाइड कूदता है, बाकी एनिमेट) में काम कर रहा हूं लेकिन क्रोम में स्लाइडिंग एनीमेशन के साथ एक स्पष्ट बग हो रहा है।

कोई इनपुट बहुत अच्छा होगा, भले ही आपको लगता है कि मुझे ऊंचाई एनीमेशन को पूरी तरह से अलग तरीके से संभालना चाहिए, कृपया मुझे बताएं!

यहाँ जे एस और सीएसएस मैं बात लगता है कि है, लेकिन पूरी बात जे एस फिडल पर है: http://jsfiddle.net/tkDCr/

जे एस

$('#myCarousel').carousel({ 
    interval: false 
}); 

$('#myCarousel').bind('slid', function(e) { 
    console.log('slid',e); 
}); 

$('#myCarousel').bind('slide', function(e) { 
    console.log('slide',e); 
    var next_h = $(e.relatedTarget).outerHeight(); 
    console.log(next_h); 
    $('.carousel').css('height', next_h); 
}); 

लाइनों 12 और 13 जावास्क्रिप्ट आप से बाहर टिप्पणी करके देख सकते हैं कि '$ (e.relatedTarget) .outerHeight();' से डेटा के साथ वैरिएबल next_h को आवंटित करके बग स्पष्ट रूप से हो रहा है। भले ही चर का उपयोग नहीं किया जाता है, फिर भी यह एनीमेशन को तोड़ देता है। 11,12, और 13 टिप्पणी करते हुए, आपको दिखाएगा कि कैरोसेल सामान्य रूप से कैसे कार्य करता है।

सीएसएस

.carousel { 
    width: 80%; 
    margin-left: auto; 
    margin-right: auto; 
    background: lightgoldenrodyellow; 
    -webkit-transition: height .5s ease; 
    -moz-transition: height .5s ease; 
    -ms-transition: height .5s ease; 
    -o-transition: height .5s ease; 
    transition: height .5s ease; 
} 

अग्रिम धन्यवाद।

Answer 1

आप समस्या को हल एक छोटी टाइमआउट द्वारा outerHeight() करने के लिए कॉल में देरी से प्राप्त कर सकते हैं:

$('#myCarousel').bind('slide', function(e) { 
    setTimeout(function() { 
     var next_h = $(e.relatedTarget).outerHeight(); 
     $('.carousel').css('height', next_h); 
    }, 10); 
}); 

इसके अलावा, आप शायद सीएसएस में कुछ करने के लिए .carousel की ऊंचाई सेट करना चाहते हैं, अन्यथा पहला संक्रमण ऊंचाई 0 से शुरू होगा, जिससे इसे शीर्ष से छोड़ दिया जाएगा।

मैं अपने बेला यहाँ अद्यतन: http://jsfiddle.net/tkDCr/3/

Answer 2

// animate do the same - timeout is not needed 

$('#myCarousel').carousel(); 
$('#myCarousel').bind('slide', function(e) { 
     $('#myCarousel').animate({height: $(e.relatedTarget).outerHeight()}); 
});   

// After using animate, there is no need for transition in css (or height)