我正在尝试使用 Bootstrap 的 Carousel 来处理高度不同的内容。高度将根据浏览器的宽度而有所不同,轮播下方有内容。我想使用 CSS 为幻灯片之间的高度变化设置动画。在 friend 的帮助下,我几乎可以在 FireFox 中使用它(第一个幻灯片跳转,其余的动画)但是 Chrome 中的滑动动画出现了一个明显的错误。
任何输入都会很棒,即使您认为我应该以完全不同的方式处理高度动画,也请告诉我!
这是我认为重要的 JS 和 CSS,但整个事情都在 JS Fiddle 上: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);
});
通过注释掉 JavaScript 的第 12 行和第 13 行,您可以看到该错误显然是由将“$(e.relatedTarget).outerHeight();”中的数据分配给变量 next_h 引起的。即使不使用该变量,它仍然会破坏动画。注释掉 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;
}
提前谢谢你。
最佳答案
// 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)
关于javascript - Bootstrap 的轮播 (v2.3.2) 上的动画高度变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14970250/