Question

我有一张全角背景图片，该页面在页面加载时首先显示。五秒钟后，我的文字逐渐淡入。

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)

这似乎不起作用。

Answer 1

根据您的评论进行编辑-在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;
}

Answer 2

您可以尝试使用.done()

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

文本淡入后加载引导程序滑块

2 个答案: