jquery - 文本在新的 Bootstrap 轮播幻灯片上淡入/淡出

Question

我构建了一个 Bootstrap 轮播，可以根据事件的轮播幻灯片更改 p 标签的文本。当幻灯片的间隔即将结束时，我将如何淡出该文本，并在新幻灯片变为事件状态时淡入新的、更改的文本？

这是 jQuery(下面是 JSFiddle 示例):

$(document).ready(function () {
$('.carousel').carousel({
    interval: 2000
});

var arrMessages = ["Text for Image 1 class!", 
                   "Text for Image 2 class!",
                   "Text for Image 3 class!"]

var $msg = $("#sticksCarouselMessage");
$('#sticksCarousel').on('slid.bs.carousel', function () {

    var text = "", 
         $active = $('div.active'),
         index = $('div.item').index($active);

    $msg.text(arrMessages[index]);

});

});

JSFIDDLE: https://jsfiddle.net/CharlieMcShane/hja32vjn/

Answer 1

您可以使用与此类似的 jQuery fadeIn/fadeOut:

$msg.fadeOut('fast', function() {
    $msg.text(arrMessages[index]);
}).fadeIn('fast');

$(document).ready(function() {
  $('.carousel').carousel({
    interval: 2000
  });

  var arrMessages = ["Text for Image 1 class!",
    "Text for Image 2 class!",
    "Text for Image 3 class!"
  ]

  var $msg = $("#sticksCarouselMessage");
  $('#sticksCarousel').on('slid.bs.carousel', function() {
    $msg.fadeOut('fast', function() {
      $msg.text(arrMessages[index]);
    }).fadeIn('fast');
    
    var text = "",
      $active = $('div.active'),
      index = $('div.item').index($active);
  });
});

/*-- Carousel bars --*/

.carousel-indicators.middle {
  left: 0;
  right: 0;
  top: auto;
  bottom: 15px;
  text-align: center;
}

.carousel-indicators.middle li {
  float: none;
  display: inline-block;
  width: 35px;
  border-radius: 0px;
}


/*-- Carousel Next/Prev --*/

.carousel .carousel-control {
  top: 50%;
}

.carousel .left.carousel-control:after {
  content: "<";
  font-size: 20px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.carousel .right.carousel-control:after {
  content: ">";
  font-size: 20px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


/*-- Carousel Pre-text --*/

#sticksCarouselMessage {
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>

<!-- Carousel Slider -->
<div class="carousel slide" id="sticksCarousel">
  <ol class="carousel-indicators middle">
    <li class="active" data-slide-to="0" data-target="#sticksCarousel"></li>
    <li data-slide-to="1" data-target="#sticksCarousel"></li>
    <li data-slide-to="2" data-target="#sticksCarousel"></li>
  </ol>

  <section class="carousel-inner">
    <div class="item active">
      <img alt="blah" class="image1" src="http://www.slidesjs.com/img/example-slide-350-3.jpg" style="width:100%;">
    </div>

    <div class="item">
      <img alt="blah" class="image2" src="http://www.slidesjs.com/img/example-slide-350-3.jpg" style="width:100%;">
    </div>

    <div class="item">
      <img alt="blah" class="image3" src="http://www.slidesjs.com/img/example-slide-350-3.jpg" style="width:100%;">
    </div>
  </section>

  <!-- Carousel Next/Prev -->
  <a class="left carousel-control" data-slide="prev" href="#sticksCarousel"></a>
  <a class="right carousel-control" data-slide="next" href="#sticksCarousel"></a>
</div>

<!-- Carousel Pre-text -->
<p id="sticksCarouselMessage">Text for Image 1 class!</p>