我正在寻找一种动画制作Bootstrap 3旋转木马字幕的好方法。我发现了这篇文章Bootstrap carousel-caption animation。
可悲的是,由于它在小提琴中工作,因此无法正常工作。在我的页面上,动画实际上不是动画。字幕会弹出,并且不会飞入。动画每个图像只能播放一次。因此,在轮播的第二轮中,字幕不再显示。
我的CSS是:
.carousel-caption {
z-index: 0;
font-size:24px;
right: 0;
bottom: 0;
left: 0;
top: 0;
padding-bottom: 30px;
padding-top:25%;
height: 100% !important;
background:rgba(0, 0, 0, 0.25);
display: none;
}
我的JS:
var carouselContainer = $('.carousel');
var slideInterval = 5000;
function toggleCaption() {
$('.carousel-caption').hide();
var caption = carouselContainer.find('.active').find('.carousel-caption');
caption.delay(500).toggle("slide", {direction:'right'});
}
carouselContainer.carousel({
interval: slideInterval,
cycle: true,
pause: "hover"
}).on('slid.bs.carousel', function() {
toggleCaption();
});
您可以看到网站here
最佳答案
我遇到了同样的问题,终于找到了解决方案!
我只是Jquery的初学者,所以我确定您可以清理一下。另外,可能最好使用自己的Carousal Structure,并仅将2类用于要设置动画的字幕。
诀窍是使用Animate.css,但您必须在动画字幕上禁用Firefox的Ease功能,否则会引起问题。
在这里提琴:http://jsfiddle.net/z6xq12bh/4/
有关更多动画效果:http://daneden.github.io/animate.css/
HTML:
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" 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">
<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:
<script>
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');
</script>
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;
}
关于javascript - 动画字幕Bootstrap 3传送带,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/28648205/