相关疑难解决方法(0)

我正在尝试使用Bootstrap的Carousel来处理高度不同的内容.高度将根据浏览器宽度而有所不同,并且旋转木马下方有内容.我想使用CSS来设置幻灯片之间高度变化的动画.在朋友的帮助下,我几乎可以在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行,您可以看到错误显然是由于将变量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;
}

先感谢您.