堆棧內存溢出
  簡體   English   中英

動畫 Bootstrap 輪播標題和按鈕

[英]Animate Bootstrap carousel caption & button

 原文  2015-04-08 15:43:59  0   4    javascript/ jquery/ html/ css/ twitter-bootstrap

問題描述

在 carousel 中想要動畫標題和按鈕下面有一些延遲是我從這個 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;
 }

請用我的代碼檢查這個小提琴，這不起作用。

4 個解決方案

解決方案1
 1  2015-04-08 15:54:46

您沒有在 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');

解決方案2
 1  2015-04-08 15:55:20

您缺少一些外部文件：

你也必須選擇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');
});

希望它有幫助

解決方案3
 1 已采納  2015-04-08 16:00:55

延遲更新

調整 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/

解決方案4
 0  2020-07-06 09:41:47

上面答案中的 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');

否則，動畫將被觸發兩次。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 動畫字幕Bootstrap 3傳送帶 動畫自舉輪播字幕 在自舉輪播字幕中滑動 Bootstrap 3輪播字幕延遲 Bootstrap 輪播標題 旋轉木馬外面的Bootstrap標題 Bootstrap輪播字幕動畫 Bootstrap js Carousel Caption問題 如何在Bootstrap 4輪播中居中顯示字幕？ 引導輪播標題按鈕不可點擊
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM