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

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

对不起，我无法应付您的延误，所以我用超时代替。这样，当传送带手动导航时，动画将被取消。

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 

Answer 2

如果您使用的是Twitter Bootstrap 3，y OU需要使用slide.bs.carousel，而不是幻灯片和slid.bs.carousel代替下滑

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