Bootstrap Carousel在单独的div中显示字幕，不显示/隐藏动画

Question

我用bootstrap和一些从其他地方获取/调整的javascript把这个滑块放在一起，一切看起来都很好，除了我想摆脱标题改变时发生的小过渡/动画。

字幕看起来像是滑入/滑出，但我只是想让它们立即出现/消失。我担心这可能是bootstrap javascript中的某个东西，但我不确定如何修复它。

HTML：

<div class="container">
<div data-ride="carousel" class="carousel slide" data-interval="false" id="carousel-1">
    <div class="carousel-inner">
        <div class="carousel-item"><img class="w-100 d-block" src="https://cdn.bootstrapstudio.io/placeholders/1400x800.png" alt="Slide Image" /></div>
        <div class="carousel-item"><img class="w-100 d-block" src="https://cdn.bootstrapstudio.io/placeholders/1400x800.png" alt="Slide Image" /></div>
        <div class="carousel-item active"><img class="w-100 d-block" src="https://cdn.bootstrapstudio.io/placeholders/1400x800.png" alt="Slide Image" /></div>
    </div>
    <div><a href="#carousel-1" role="button" data-slide="prev" class="carousel-control-prev"><span aria-hidden="true" class="carousel-control-prev-icon"></span><span class="sr-only">Previous</span></a><a href="#carousel-1" role="button" data-slide="next" class="carousel-control-next"><span aria-hidden="true" class="carousel-control-next-icon"></span><span class="sr-only">Next</span></a></div>
    <ol class="carousel-indicators">
        <li data-target="#carousel-1" data-slide-to="0"></li>
        <li data-target="#carousel-1" data-slide-to="1"></li>
        <li data-target="#carousel-1" data-slide-to="2" class="active"></li>
    </ol>
</div>
<div id="slider-captions">
    <div>
        <div id="caption-0" class="pp-carousel-caption">
            <p>Paragraph 1</p>
        </div>
        <div id="caption-1" class="pp-carousel-caption">
            <p>Paragraph 2</p>
        </div>
        <div id="caption-2" class="pp-carousel-caption">
            <p>Paragraph 3</p>
        </div>
    </div>
</div>

javascript：

$("#carousel-1").on('slide.bs.carousel', function(evt) {

   var step = $(evt.relatedTarget).index();

   $('#slider-captions .pp-carousel-caption:not(#caption-'+step+')').hide( function() {
        $('#caption-'+step).show();
   });

});

CSS：

.pp-carousel-caption:not(#caption-0) {
    display: none;
}

.pp-carousel-caption:not(#caption-0) {
    display: none;
}

Answer 1

您可以使用第一个参数将持续时间设置为0，默认值为400。

$('#slider-captions .pp-carousel-caption:not(#caption-'+step+')').hide(0, function() {
     $('#caption-'+step).show(0);
});

• https://api.jquery.com/show/#show-duration-complete
• https://api.jquery.com/hide/#hide-duration-complete