淡出在推特引导旋转木马每个幻灯片的内容

Question

使用下面的代码，我让"#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>

Answer 1

很抱歉我无法应付你的延误，所以我使用了超时代替。这样，当旋转木马被手动导航时，动画就会被取消。

演示(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

Answer 2

如果您使用的是Twitter Bootstrap 3，则需要使用 slides .bs。carousel代替slide和slid.bs。

http://getbootstrap.com/javascript/#carousel-usage事件部分