Bootstrap的旋转木马上的动画高度变化（v2.3.2）

我试图使用Bootstrap的旋转木马来处理不是相同高度的内容。高度将根据浏览器的宽度而有所不同，传送带下面有内容。我想用CSS来设置幻灯片之间的高度变化。在朋友的帮助下，我几乎可以在FireFox中工作（第一次幻灯片跳转，其余的动画），但Chrome浏览器中的滑动动画出现了明显的错误。Bootstrap的旋转木马上的动画高度变化（v2.3.2）

任何输入都会很棒，即使您认为我应该以完全不同的方式处理高度动画，请让我知道！

这里是JS和CSS，我认为此事，但整个事情是JS小提琴：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可以看到该错误显然是由将变量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; 
}

预先感谢您。

来源

2013-02-20 brant

您可以通过短超时延迟调用outerHeight（）得到解决该问题：

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

此外，你可能想.carousel的高度设置在CSS的东西，否则第一次过渡将从高度0开始，使其从顶部下降。

我在这里更新您的提琴：http://jsfiddle.net/tkDCr/3/

来源

2013-03-02 19:30:28

谢谢。这工作得很好。我很抱歉，我没有足够的声望来赞扬你！ – brant 2013-03-08 07:10:41

因为应该使用boostrap 3.0'slide.bs.carousel'事件。 – 2014-10-26 07:08:00

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

来源

2013-03-30 15:09:33 dth

Bootstrap的旋转木马上的动画高度变化（v2.3.2）

回答

相关问题