2

次のコードでは、「#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>
4

2 に答える 2

5

申し訳ありませんが、あなたの遅延に対応できなかったため、代わりにタイムアウトを使用しました。こうすることで、カルーセルを手動でナビゲートするとアニメーションがキャンセルされます。

デモ (jsfiddle)

最初に、最初の項目をアニメーションの始まりのように見せるための CSS がありますが、必要に応じて JS を使用してこれを行うこともできます。

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

次に、アニメーション部分が来ます。これは、アニメーションを開始するときと、外観をリセットする必要があるときの 2 つのバインドに分かれています。

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
于 2013-01-08T19:50:47.297 に答える
1

Twitter Bootstrap 3 を使用している場合は、slide の代わりに slide.bs.carousel を使用し、slidの代わりにslid.bs.carouselを使用する必要があります。

http://getbootstrap.com/javascript/#carousel-usageイベント セクション。

于 2013-12-16T09:36:36.150 に答える