最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Animate height change on Bootstrap's Carousel (v2.3.2) - Stack Overflow

programmeradmin9浏览0评论

I'm attempting to use Bootstrap's Carousel to handle content that isn't the same height. The heights will differ based on the browsers width, and there is content below the carousel. I'd like to use CSS to animate the height change between slides. With some help from a friend I almost have this working in FireFox (the first slide jumps, the rest animate) but an obvious bug is happening with the sliding animation in Chrome.

Any input would be great, even if you think I should handle the height animation in a completely different way, please let me know!

Here is the JS and CSS that I think matter, but the whole thing is on JS Fiddle: /

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

By commenting out lines 12 and 13 of the JavaScript you can see that the bug is clearly being caused by assigning the variable next_h with the data from '$(e.relatedTarget).outerHeight();'. Even if the variable isn't used it still breaks the animation. Commenting out 11,12, and 13, will show you how the carousel functions normally.

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.

I'm attempting to use Bootstrap's Carousel to handle content that isn't the same height. The heights will differ based on the browsers width, and there is content below the carousel. I'd like to use CSS to animate the height change between slides. With some help from a friend I almost have this working in FireFox (the first slide jumps, the rest animate) but an obvious bug is happening with the sliding animation in Chrome.

Any input would be great, even if you think I should handle the height animation in a completely different way, please let me know!

Here is the JS and CSS that I think matter, but the whole thing is on 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);
});

By commenting out lines 12 and 13 of the JavaScript you can see that the bug is clearly being caused by assigning the variable next_h with the data from '$(e.relatedTarget).outerHeight();'. Even if the variable isn't used it still breaks the animation. Commenting out 11,12, and 13, will show you how the carousel functions normally.

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.

Share Improve this question edited Mar 25, 2014 at 15:44 hugo der hungrige 12.9k9 gold badges59 silver badges86 bronze badges asked Feb 20, 2013 at 0:30 brantbrant 2683 silver badges7 bronze badges 0
Add a comment  | 

2 Answers 2

Reset to default 10
// 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)

You can get around the problem by delaying the call to outerHeight() by a short timeout:

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

Also, you probably want to set the height of .carousel to something in the css, otherwise the first transition will begin at height 0, making it drop from the top.

I updated your fiddle here: http://jsfiddle.net/tkDCr/3/

发布评论

评论列表(0)

  1. 暂无评论