Bootstrap'in Carousel (v2.3.2) üzerindeki yükseklik değişimi anı

Question

Aynı yükseklikte olmayan içerikleri işlemek için Bootstrap's Carousel'i kullanmaya çalışıyorum. Yükseklikler tarayıcı genişliğine göre farklılık gösterecek ve karuselin altında içerik var. Slaytlar arasındaki yükseklik değişikliğini canlandırmak için CSS kullanmak istiyorum. Bir arkadaşımdan yardım alarak neredeyse FireFox'ta çalışıyorum (ilk slayt atlamaları, geri kalanlar canlandıran) ama Chrome'daki kayan animasyonla bariz bir hata oluyor.

Eğer yükseklik animasyonunu tamamen farklı bir şekilde kullanabileceğimi düşünürsünüz bile, herhangi bir girdi harika olurdu, lütfen bana bildirin!

Burada mesele düşünüyorum JS ve CSS, ama her şey JS Fiddle üzerindedir: JavaScript sen satırlarını 12 ve 13. dışarı yorum olarak http://jsfiddle.net/tkDCr/

JS

$('#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); 
}); 

error'in açıkça, next_h değişkeninin '$ (e.relatedTarget) .outerHeight();') verisi ile atanmasından kaynaklandığını görebiliriz. Değişken kullanılmasa bile, yine de animasyonu bozar. 11,12 ve 13'ü yorumlamak, atlı karıncaya normal şekilde nasıl çalıştığını gösterecektir.

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

CSS şimdiden teşekkürler.

Answer 1

Kısa bir zaman aşımı ile outerHeight() çağrısına geciktirerek sorunu alabilirsiniz:

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

Ayrıca, muhtemelen css yer alan bir konuya .carousel yüksekliğini ayarlamak istediğiniz, aksi İlk geçiş, 0'dan başlayarak, üstten düşecek. Ben burada keman güncellenmiş

: 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)