Bootstrap Carousel 带标题的单独 div 不带显示/隐藏动画答案

【问题标题】：Bootstrap Carousel w/captions in separate div w/o show/hide animationsBootstrap Carousel 带标题的单独 div 不带显示/隐藏动画
【发布时间】：2021-07-03 14:27:30
【问题描述】：

我已经将这个带引导程序的滑块和一些从其他地方获取/调整的 javascript 放在一起，看起来一切都很好，除了我想摆脱在标题更改时发生的小过渡/动画。

看起来字幕有点滑入/滑出，但我只是希望它们立即出现/消失。恐怕它可能是引导 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;
}

【问题讨论】：

标签： javascript html css bootstrap-4 carousel

【解决方案1】：

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

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

【讨论】：