我正在尝试使用Bootstrap的Carousel来处理高度不同的内容。高度将根据浏览器宽度而异,并且轮播下方有内容。我想使用CSS来在幻灯片之间动画变化高度。在朋友的帮助下,我几乎在FireFox中实现了这个功能(第一张幻灯片会跳动,其余的都是动画),但在Chrome中滑动动画明显存在错误。
任何建议都很好,即使您认为我应该以完全不同的方式处理高度动画,请告诉我!
以下是我认为重要的JS和CSS,但整个内容都在JS Fiddle上:http://jsfiddle.net/tkDCr/
通过注释掉 JavaScript 的第 12 和第 13 行,可以看到该 bug 明显是由将变量"next_h" 赋值为 '$(e.relatedTarget).outerHeight();' 的数据引起的。即使不使用该变量也会破坏动画效果。注释掉 11、12 和 13 行,就可以看到轮播图的正常功能。
CSS
任何建议都很好,即使您认为我应该以完全不同的方式处理高度动画,请告诉我!
以下是我认为重要的JS和CSS,但整个内容都在JS Fiddle上: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);
});
通过注释掉 JavaScript 的第 12 和第 13 行,可以看到该 bug 明显是由将变量"next_h" 赋值为 '$(e.relatedTarget).outerHeight();' 的数据引起的。即使不使用该变量也会破坏动画效果。注释掉 11、12 和 13 行,就可以看到轮播图的正常功能。
CSS
.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;
}
Thank you in advance.