Twitter Bootstrap Carousel 中每张幻灯片的淡入和淡出内容答案

【问题标题】：Fade in and out content for each slide in Twitter Bootstrap CarouselTwitter Bootstrap Carousel 中每张幻灯片的淡入和淡出内容
【发布时间】：2013-01-08 14:08:15
【问题描述】：

使用下面的代码，我得到“#featured-carousel”的内容以淡入和淡出幻灯片 2、3 等。
但是，不是第一张幻灯片。
如何让第一张幻灯片在第一次时淡入淡出？

<script type="text/javascript">
        jQuery(document).ready(function($) {

            var color = "<?=$color?>";
            var header_color = "<?=$header_color?>";        

            $('#featured-carousel').bind('slide', function() {
                $(".carousel-caption").animate({'opacity': 0}, 500).delay(2000);  
                $(".item img").animate({'opacity': 1}, 500).delay(2000);          
                $(".carousel-caption").animate({'opacity': 1}, 500).delay(2000); 
                $(".item img").animate({'opacity': 0.2}, 500).delay(2000);                 
            }); 

            $('#featured-carousel').carousel({
                   interval: 6000,
                      cycle: true,          
            });

        });
    </script>

【问题讨论】：

标签： jquery twitter-bootstrap carousel

【解决方案1】：

很抱歉，我无法应对您的延误，所以我改用了超时。这样，当手动导航轮播时，动画就会被取消。

Demo (jsfiddle)

首先，一些 CSS 使第一个项目看起来像动画的开始，但如果您愿意，可以使用一些 JS 来完成：

#myCarousel .carousel-caption {
  opacity: 0;
  filter: alpha(opacity=0);
}

然后是动画部分，分为两个绑定：什么时候开始动画和什么时候需要重置外观：

var $carousel = $('#myCarousel');
var $carouselCaptions = $carousel.find('.item .carousel-caption');
var $carouselImages = $carousel.find('.item img');
var carouselTimeout;

$carousel.on('slid', function () {
    var $item = $carousel.find('.item.active');
    carouselTimeout = setTimeout(function() { // start the delay
        carouselTimeout = false;
        $item.find('.carousel-caption').animate({'opacity': 1}, 500);
        $item.find('img').animate({'opacity': 0.2}, 500);
    }, 2000);
}).on('slide', function () {
    if(carouselTimeout) { // Carousel is sliding, stop pending animation if any
        clearTimeout(carouselTimeout);
        carouselTimeout = false;
    }
    // Reset styles
    $carouselCaptions.animate({'opacity': 0}, 500);
    $carouselImages.animate({'opacity': 1}, 500);
});;

$carousel.carousel({
    interval: 6000,
    cycle: true,
}).trigger('slid'); // Make the carousel believe that it has just been slid so that the first item gets the animation

【讨论】：

非常感谢舍布罗。您的代码完全按照我的意愿进行了数学运算！
谢谢..真的。您可以在demo.theme.firmasite.com查看修改后的版本

【解决方案2】：

如果你使用 Twitter Bootstrap 3，你需要使用 slide.bs.carousel 而不是 slide 和 slid.bs.carousel而不是滑动

http://getbootstrap.com/javascript/#carousel-usage 活动部分。

【讨论】：