淡入淡出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活動組。