Question

我正在使用其网站中的bootstrap轮播，并且有3张幻灯片，每张幻灯片包含一个图像和一组文本。我想在幻灯片更改时操纵它，从右到左动画文本。我已经包含了代码段，我将非常感谢您的帮助。

 var $carousel = $('#myCarousel');
 $carousel.bind('slide.bs.carousel', function(e) {
   $('#myCarousel .item .container div').animate({
     'top': '-50px',
     'opacity': '0.5'
       //  transition: 'all 0.5s all 0.4s ease-in-out',
   },500);
   $('#myCarousel .item.active .container div').animate({
     // transition: 'all 0.5s all 0.4s ease-in-out',
     'top': '0',
     'opacity': '1'
   },500);
 });

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <style>
    .carousel-inner > .item > img,
    .carousel-inner > .item > a > img {
      width: 70%;
      margin: auto;
    }
  </style>
</head>

<body>

  <div class="container">
    <br>
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="http://www.w3schools.com/bootstrap/img_chania2.jpg" alt="Chania" width="460" height="345">
          <div class="container">
            <div class="carousel-caption" style="background-color:rgba(255,255,255,0.2)">
              <h1>H1</h1>
            </div>
          </div>
        </div>

        <div class="item">
          <img src="http://www.w3schools.com/bootstrap/img_chania.jpg" alt="Chania" width="460" height="345">
          <div class="container">
            <div class="carousel-caption" style="background-color:rgba(255,255,255,0.2)">
              <h1>H1</h1>
            </div>
          </div>
        </div>

        <div class="item">
          <img src="http://www.w3schools.com/bootstrap/img_flower.jpg" alt="Chania" width="460" height="345">
          <div class="container">
            <div class="carousel-caption" style="background-color:rgba(255,255,255,0.2)">
              <h1>H1</h1>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
  </div>
  </div>

</body>

</html>

Answer 1

问题可能在于您正在尝试使用slide.bs.carousel处理程序中的两个动画，因此它们都应用于同一个元素。如果你将它分解为slide.bs.carousel（在幻灯片之前发生）和slid.bs.carousel（在新幻灯片之后发生）事件，你可以更好地控制“pre”/“post”滑动。

点击此处查看示例。我使用slideUp而不是动画，但你应该可以用你想要的任何动画替换。 https://jsfiddle.net/sheldon_griffin/zz9nwng3/1/

$('#myCarousel').on('slide.bs.carousel', function(e) {
  $('.carousel-caption').hide();
}).on('slid.bs.carousel', function(e) {
  $('.active .carousel-caption').slideToggle('slow');
});

添加效果到bootstrap轮播幻灯片

1 个答案: