Javascript 动画引导旋转木马标题&；按钮

在carousel中，我想设置标题和按钮的动画，下面是我从中复制的代码，但在我的jsfiddle中，动画不起作用，而且实际上幻灯片也没有显示

HTML

CSS

---

因此，这不起作用。

您的JSFIDLE中没有设置Jquery库。在这里找到最新的小提琴

---

您缺少一些外部文件：

还必须选择jquery

以下是添加文件的代码：

---

希望是hepls

延迟更新

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

HTML:

JS:

---

上面答案中的fiddle:

JS必须稍微调整一下，才能在Bootstrap4.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');

---

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

在JSFIDLE中，您似乎没有包含外部资源。这是一个包含它们的分叉版本：我同意我忘了添加外部资源，但是shop now按钮仍然没有动画，但是shop now按钮根本没有动画，因为您没有将动画类添加到文本中，这是shop now按钮动画，现在两个按钮都在一起动画，没有任何延迟。我希望标题和按钮之间有一些延迟，但我希望标题和按钮之间有一些延迟delay@user1120133对不起，你能说得更具体一点吗？延迟哪些元素？第一个标题应该首先动画，然后经过一点延迟，然后立即购买按钮应该动画在旋转木马问题。很乐意帮忙。

  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');

 .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;
 }

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');

$(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');
});

 <!-- 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 -->

.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;
}

$(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');
});

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');