文本淡入后加载引导滑块答案

【问题标题】：Load bootstrap slider after the text fade in文本淡入后加载引导滑块
【发布时间】：2019-04-24 04:47:04
【问题描述】：

我有一个全角背景图像，它在页面加载时首先出现。 5 秒后，我有一个淡入的文本。

setTimeout(function() {
  $('.fadetext').fadeIn("slow");
}, 5000)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="bigbackgroundimage">
  <div class="fadetext" style="display: none;">
    <img src="images/home/home-text.png" alt="">
  </div>
</div>

fadeIn 文本 5 秒后，我想加载引导滑块。这怎么可能？

我尝试使用 setTimeout 函数使用 10 秒

 setTimeout(function(){
   $('.carousel').carousel({
     interval: 5000
   });      
 }, 10000)

这似乎不起作用。

【问题讨论】：

到目前为止，您对滑块进行了哪些尝试，发生了什么？您是否立即加载它，只需要延迟它？
我尝试使用另一个延迟 10 秒的 setTimeout 函数。我也希望这些图像以 5 秒的间隔滑动。

标签： javascript jquery twitter-bootstrap carousel

【解决方案1】：

根据您的 cmets 进行编辑 - 在您的 css 中以 display:none 隐藏轮播开始，然后在回调函数中，在初始化之前显示轮播

setTimeout(function() {
  $('.fadetext').fadeIn("slow", function() {
    // this is run after the fadeIn has finished
    setTimeout(function() {
      $('.carousel').show().carousel({
        interval: 5000
      });
    }, 5000) // can set this to 5 seconds 
  });
}, 5000)

.carousel {
  display:none;
}

【讨论】：

但是我可以看到浏览器中已经加载了轮播。是不是可以先隐藏它，只在文本淡入 5 秒后才显示轮播？

【解决方案2】：

你可以试试.done()

$('.fadetext').fadeIn("slow").done(function() {
    setTimeout(function() {
        $('.carousel').show().carousel({
            interval: 5000
        });
    }, 5000);
});

【讨论】：