动画Bootstrap旋转木马标题＆amp;按键

时间：2015-04-08 15:44:00

标签： javascript jquery html css twitter-bootstrap

在旋转木马中想要动画字幕和按钮，下面有一些延迟是我从this jsfiddle 复制的代码，但在我的jsfiddle中，动画不起作用，并且实际上幻灯片也没有显示。

HTML

                             

<!-- Wrapper for slides -->
 <div class="carousel-inner">
<div class="item active">
  <img src="http://placehold.it/1200x400" alt="...">
  <div class="carousel-caption">
      <h3 class="toggleHeading">Caption Text</h3>
      <p class="toggleCaption">This is some text<p>
  </div>
</div>
  <div class="item">
  <img src="http://placehold.it/1200x400" alt="...">
  <div class="carousel-caption">
      <h3 class="toggleHeading">Caption Text 2</h3>
       <p class="toggleCaption">This is some text<p>
  </div>
  </div>
     <div class="item">
   <img src="http://placehold.it/1200x400" alt="...">
  <div class="carousel-caption">
      <h3 class="toggleHeading">Caption Text 3</h3>
       <p class="toggleCaption">This is some text<p>
  </div>
</div>
</div>

 <!-- Controls -->
 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left"></span>
</a>
 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- Carousel -->

JS 

  var carouselContainer = $('.carousel');
   var slideInterval = 5000;

function toggleH(){
    $('.toggleHeading').hide()
    var caption = carouselContainer.find('.active').find('.toggleHeading').addClass('animated fadeInRight').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
        function (){
        $(this).removeClass('animated fadeInRight')});
caption.slideToggle();
}

function toggleC(){
    $('.toggleCaption').hide()
    var caption = carouselContainer.find('.active').find('.toggleCaption').addClass('animated fadeInUp').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
        function (){
        $(this).removeClass('animated fadeInUp')
});
caption.slideToggle();
}
  carouselContainer.carousel({
  interval: slideInterval, cycle: true, pause: "hover"})
 .on('slide.bs.carousel slid.bs.carousel', toggleH).trigger('slide.bs.carousel')
 .on('slide.bs.carousel slid.bs.carousel', toggleC).trigger('slide.bs.carousel');

CSS 

 .toggleHeading {
animation-delay: 0.5s;
 -webkit-animation-delay: 0.5s;
 -moz-animation-delay: 0.5s;
   -o-animation-delay: 0.5s;
   -moz-transition: none !important;
}

 .toggleCaption {
animation-delay: 1.5s;
 -webkit-animation-delay: 1.5s;
 -moz-animation-delay: 1.5s;
   -o-animation-delay: 1.5s;
   -moz-transition: none !important;
 }

Please check this fiddle with my code 这并没有相应的工作。

4 个答案:

答案 0 :(得分：1)

您的JSfiddle中没有设置Jquery库。在这里找到更新的小提琴http://jsfiddle.net/cmdvrhwz/2/ 

var carouselContainer = $('.carousel');
var slideInterval = 5000;

    function toggleH(){
        $('.toggleHeading').hide()
        var caption = carouselContainer.find('.active').find('.toggleHeading').addClass('animated fadeInRight').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
            function (){
            $(this).removeClass('animated fadeInRight')});
    caption.slideToggle();
    }

    function toggleC(){
        $('.toggleCaption').hide()
        var caption = carouselContainer.find('.active').find('.toggleCaption').addClass('animated fadeInUp').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
            function (){
            $(this).removeClass('animated fadeInUp')
    });
    caption.slideToggle();
    }
carouselContainer.carousel({
interval: slideInterval, cycle: true, pause: "hover"})
.on('slide.bs.carousel slid.bs.carousel', toggleH).trigger('slide.bs.carousel')
.on('slide.bs.carousel slid.bs.carousel', toggleC).trigger('slide.bs.carousel');

答案 1 :(得分：1)

您缺少一些外部文件：

您还必须选择jquery。

这是添加文件的代码：http://jsfiddle.net/cmdvrhwz/4/ 

$(document).ready(function(){
    var carouselContainer = $('.carousel');
    var slideInterval = 5000;
        function toggleH(){
            $('.toggleCaption').hide()
            var caption = carouselContainer.find('.active').find('.toggleCaption').addClass('animated fadeInRight').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
                function (){
                $(this).removeClass('animated fadeInRight')});
        caption.slideToggle();
        }

        function toggleC(){
            $('.toggleButton').hide()
            var button = carouselContainer.find('.active').find('.toggleButton').addClass('animated fadeInUp').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
                function (){
                $(this).removeClass('animated fadeInUp')
        });
        button.slideToggle();
        }
    carouselContainer.carousel({
    interval: slideInterval, cycle: true, pause: "hover"})
    .on('slide.bs.carousel slid.bs.carousel', toggleH).trigger('slide.bs.carousel')
    .on('slide.bs.carousel slid.bs.carousel', toggleC).trigger('slide.bs.carousel');
});

希望它是肝脏

答案 2 :(得分：1)

已更新延迟

调整HTML并将标题和按钮移动到自己的div中，以便CSS适当地应用延迟动画。

HTML：

 <!-- Header Carousel -->
<header id="myCarousel" class="carousel slide">
    <!-- 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">
        <div class="item active">
            <img src="http://placehold.it/1200x400" alt="...">
            <div class="carousel-caption">
                <div class="toggleCaption">
                     <h3>Caption Text</h3>
                </div>
                <div class="toggleButton">
                    <p><a class="btn btn-default-outline btn-lg" role="button">Shop Now</a>
                    </p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="http://placehold.it/1200x400" alt="...">
            <div class="carousel-caption">
                <div class="toggleCaption">
                     <h3>Caption Text</h3>
                </div>
                <div class="toggleButton">
                    <p><a class="btn btn-default-outline btn-lg" role="button">Shop Now</a>
                    </p>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="http://placehold.it/1200x400" alt="...">
            <div class="carousel-caption">
                <div class="toggleCaption">
                     <h3>Caption Text</h3>
                </div>
                <div class="toggleButton">
                    <p><a class="btn btn-default-outline btn-lg" role="button">Shop Now</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>

    </div>
    <!-- Carousel -->

CSS：

.toggleCaption {
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-delay: 1s;
    -moz-transition: none !important;
}
.toggleButton {
    animation-delay: 1.5s;
    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
    -o-animation-delay: 1.5s;
    -moz-transition: none !important;
}

JS：

$(document).ready(function () {
    var carouselContainer = $('.carousel');
    var slideInterval = 5000;

    function toggleH() {
        $('.toggleCaption').hide()
        var caption = carouselContainer.find('.active').find('.toggleCaption').addClass('animated fadeInRight').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',

        function () {
            $(this).removeClass('animated fadeInRight')
        });
        caption.slideToggle();
    }

    function toggleC() {
        $('.toggleButton').hide()
        var button = carouselContainer.find('.active').find('.toggleButton').addClass('animated fadeInUp').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',

        function () {
            $(this).removeClass('animated fadeInUp')
        });
        button.slideToggle();
    }
    carouselContainer.carousel({
        interval: slideInterval,
        cycle: true,
        pause: "hover"
    })
        .on('slide.bs.carousel slid.bs.carousel', toggleH).trigger('slide.bs.carousel')
        .on('slide.bs.carousel slid.bs.carousel', toggleC).trigger('slide.bs.carousel');
});

小提琴：http://jsfiddle.net/5Lwyc6rb/1/

答案 3 :(得分：0)

上述答案中的JS必须进行一些调整才能使其在Bootstrap 4.x中工作：

最后一行必须更改为：

carouselContainer.carousel({
  interval: slideInterval, cycle: true, pause: "hover"
})
.on('slid.bs.carousel', toggleH).trigger('slide.bs.carousel')
.on('slid.bs.carousel', toggleC).trigger('slide.bs.carousel');

否则，动画将被触发两次。

相关问题
最新问题