为引导轮播幻灯片添加效果答案

【问题标题】：Adding effect to the bootstrap carousel slides为引导轮播幻灯片添加效果
【发布时间】：2016-10-27 05:23:24
【问题描述】：

我在其网站中使用引导轮播，并且有 3 张幻灯片，每张幻灯片都包含一个图像和一个文本 div。我想在幻灯片更改时操作它，文本从右到左动画。我已经包含了代码 sn-p，非常感谢您的帮助。

 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>

【问题讨论】：

您的动画可能没有达到您的预期 - 它们导致标题背景扩展到图像顶部。在我看来，去掉这两个动画效果更好，之后，标题文本确实会随着图像从右到左滑入，尽管它可能仍然不是您正在寻找的动画。
@SheldonGriffin 是的，但问题不在于动画，问题是我无法在下一张幻灯片上执行动画，它是在上一张幻灯片上执行的，而不是在下一次旋转中执行
查看此链接，或许它可以帮助您了解如何在文本中添加动画sitepoint.com/bootstrap-carousel-with-css3-animations

标签： javascript jquery css twitter-bootstrap carousel

【解决方案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');
});

【讨论】：

谢谢，正是我需要的