当 div 获得更多内容时，让它顺利变大

Question

嗨，我正在为一个网站制作菜单卡。

我确实制作了一个滑块，因此菜单卡确实具有不同的类别，但某些类别的内容比其他类别更多。

所以它使div更大，但它使div非常粗略地变大。
您可以实时查看此页面：http://toontjeindestad.coersonline.nl/，然后向下滚动到带有箭头的菜单。

我尝试给div 一个过渡，但这也不起作用。

这是我的滑块/菜单的 HTML 代码。

<div id="text-carousel" class="carousel slide">
    <!-- Wrapper for slides --> 
    <div class="carousel-inner">
        <div class="item active">
            <div class="carousel-content">
                <div class="repsonsivecontent" style="position: relative; left: 50%; transform: translateX(-50%);">
                    <?php if( have_rows('voorgerechten') ): ?>
                        <?php while( have_rows('voorgerechten') ): the_row(); 
                            // vars
                            $gerechtvoorgerecht = get_sub_field('gerecht');
                            $prijsvoorgerecht = get_sub_field('prijs');
                            $omschrijvingvoorgerecht = get_sub_field('omschrijving');
                            ?>
                            <div id="margin" style="width: 300px; display: inline-block; margin-left: 25px; margin-right: 25px; position: relative;">
                                <h3 style="text-align:center; margin-bottom: 0px;"><?php echo $gerechtvoorgerecht?></h3><br>
                                <p style="text-align: center; font-family: Merriweather; color:white; font-size: 16px; margin-bottom: 0px;"><i><?php echo $omschrijvingvoorgerecht?></i></p>
                                <p style="text-align: center; font-family: Merriweather; color:white; font-size: 16px;"><i>&euro; <?php echo $prijsvoorgerecht?></i></p><br>
                            </div>
                        <?php endwhile; ?>
                    <?php endif; ?>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="carousel-content">
                <div class="repsonsivecontent" style="position: relative; left: 50%; transform: translateX(-50%);">
                    <?php if( have_rows('vleesgerechten') ): ?>
                        <?php while( have_rows('vleesgerechten') ): the_row(); 
                            // vars
                            $gerechtvleesgerecht = get_sub_field('gerecht');
                            $prijsvleesgerecht = get_sub_field('prijs');
                            $omschrijvingvleesgerecht = get_sub_field('omschrijving');
                            ?>
                            <div id="margin" style="width: 300px; display: inline-block; margin-left: 25px; margin-right: 25px; position: relative;">
                                <h3 style="text-align:center; margin-bottom: 0px;"><?php echo $gerechtvleesgerecht?></h3><br>
                                <p style="text-align: center; font-family: Merriweather; color:white; font-size: 16px; margin-bottom: 0px;"><i><?php echo $omschrijvingvleesgerecht?></i></p>
                                <p style="text-align: center; font-family: Merriweather; color:white; font-size: 16px;"><i>&euro; <?php echo $prijsvleesgerecht?></i></p><br>
                            </div>
                        <?php endwhile; ?>
                    <?php endif; ?>
                </div>
            </div>
        </div>
        <div class="item" data-id="1">
            <div class="carousel-content">
                <div class="repsonsivecontent" style="position: relative; left: 50%; transform: translateX(-50%);">
                    <?php if( have_rows('visgerechten') ): ?>
                        <?php while( have_rows('visgerechten') ): the_row(); 
                            // vars
                            $gerechtvisgerecht = get_sub_field('gerecht');
                            $prijsvisgerecht = get_sub_field('prijs');
                            $omschrijvingvisgerecht = get_sub_field('omschrijving');
                            ?>
                            <div id="margin" style="width: 300px; display: inline-block; margin-left: 25px; margin-right: 25px; position: relative;">
                                <h3 style="text-align:center; margin-bottom: 0px;"><?php echo $gerechtvisgerecht?></h3><br>
                                <p style="text-align: center; font-family: Merriweather; color:white; font-size: 16px; margin-bottom: 0px;"><i><?php echo $omschrijvingvisgerecht?></i></p>
                                <p style="text-align: center; font-family: Merriweather; color:white; font-size: 16px;"><i>&euro; <?php echo $prijsvisgerecht?></i></p><br>
                            </div>
                        <?php endwhile; ?>
                    <?php endif; ?>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="carousel-content">
                <div class="repsonsivecontent" style="position: relative; left: 50%; transform: translateX(-50%);">
                    <?php if( have_rows('soepen') ): ?>
                        <?php while( have_rows('soepen') ): the_row(); 
                            // vars
                            $gerechtsoep = get_sub_field('gerecht');
                            $prijssoep = get_sub_field('prijs');
                            $omschrijvingsoep = get_sub_field('omschrijving');
                            ?>
                            <div id="margin" style="width: 300px; display: inline-block; margin-left: 25px; margin-right: 25px; position: relative;">
                                <h3 style="text-align:center; margin-bottom: 0px;"><?php echo $gerechtsoep?></h3><br>
                                <p style="text-align: center; font-family: Merriweather; color:white; font-size: 16px; margin-bottom: 0px;"><i><?php echo $omschrijvingsoep?></i></p>
                                <p style="text-align: center; font-family: Merriweather; color:white; font-size: 16px;"><i>&euro; <?php echo $prijssoep?></i></p><br>
                            </div>
                        <?php endwhile; ?>
                    <?php endif; ?>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="carousel-content">
                <div class="repsonsivecontent" style="position: relative; left: 50%; transform: translateX(-50%);">
                    <?php if( have_rows('nagerechten') ): ?>
                        <?php while( have_rows('nagerechten') ): the_row(); 
                            // vars
                            $gerechtnagerecht = get_sub_field('gerecht');
                            $prijsnagerecht = get_sub_field('prijs');
                            $omschrijvingnagerecht = get_sub_field('omschrijving');
                            ?>
                            <div id="margin" style="width: 300px; display: inline-block; margin-left: 25px; margin-right: 25px; position: relative;">
                                <h3 style="text-align:center; margin-bottom: 0px;"><?php echo $gerechtnagerecht?></h3><br>
                                <p style="text-align: center; font-family: Merriweather; color:white; font-size: 16px; margin-bottom: 0px;"><i><?php echo $omschrijvingnagerecht?></i></p>
                                <p style="text-align: center; font-family: Merriweather; color:white; font-size: 16px;"><i>&euro; <?php echo $prijsnagerecht?></i></p><br>
                            </div>
                        <?php endwhile; ?>
                    <?php endif; ?>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="carousel-content">
                <div class="repsonsivecontent" style="position: relative; left: 50%; transform: translateX(-50%);">   
                    <?php if( have_rows('koffieenlekkers') ): ?>
                        <?php while( have_rows('koffieenlekkers') ): the_row(); 
                            // vars
                            $gerechtkoffieenlekkers = get_sub_field('gerecht');
                            $prijskoffieenlekkers = get_sub_field('prijs');
                            $omschrijvingkoffieenlekkers = get_sub_field('omschrijving');
                            ?>
                            <div id="margin" style="width: 300px; display: inline-block; margin-left: 25px; margin-right: 25px; position: relative;">
                                <h3 style="text-align:center; margin-bottom: 0px;"><?php echo $gerechtkoffieenlekkers?></h3><br>
                                <p style="text-align: center; font-family: Merriweather; color:white; font-size: 16px; margin-bottom: 0px;"><i><?php echo $omschrijvingkoffieenlekkers?></i></p>
                                <p style="text-align: center; font-family: Merriweather; color:white; font-size: 16px;"><i>&euro; <?php echo $prijskoffieenlekkers?></i></p><br>
                            </div>
                        <?php endwhile; ?>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>
    <!-- Controls --> <a class="left carousel-control" href="#text-carousel" data-slide="prev" onclick="">
    <span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#text-carousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>     
</div>
</div>

谢谢你的时间！

Answer 1

我认为您正在使用boostrap carousal尝试在页面中添加以下代码

$(document).ready(function () {
  $('.carousel').carousel({
     interval: 5000
  }).on('slide.bs.carousel', function (e) {
     var nextH = $(e.relatedTarget).height();
     $(this).find('.active').parent().animate({ height: nextH }, 500);
  });
});

Answer 2

嗨，

使用此 js 代码来提高滑块高度平滑度你可以在这里看到 在引导程序 3 轮播上动画高度变化

 $('.carousel').carousel({
        interval: 5000
    }).on('slide.bs.carousel', function (e) {
        var nextH = $(e.relatedTarget).height();
        console.log(nextH)
        console.log( $(this).find('.active.item').parent() )
        $(this).find('.active.item').parent().animate({
            height: nextH
        }, 500);
    });