6

Bootstrap のカルーセルを使用して、同じ高さではないコンテンツを処理しようとしています。高さはブラウザーの幅によって異なり、カルーセルの下にコンテンツがあります。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 行目をコメント アウトすると、'$(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;
}

前もって感謝します。

4

2 に答える 2

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)
于 2013-03-30T15:09:33.020 に答える
9

この問題は、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-02T19:30:28.487 に答える