narururu score 64
2017/11/26 11:39 投稿
| Bootstrap3のカルーセルでアニメーションの時間を任意で指定したい |
| ###実現したいこと |
| fadeInする文字を時間指定したいです。 |
| 左右のインディケータをクリックするとカルーセルの中のキャプション文字が指定した時間で浮かび上がってくるようにしたいです。 |
| Bootstrap3でカルーセルを実装してあります。 |
| ###試したこと |
| ①fadeIn()に(ミリ秒)で記述 |
| ``` |
| $("#carousel-example-generic").on("slid.bs.carousel",function() { |
| $(".carousel-caption").fadeIn(5000); |
| }); |
| ``` |
| ②fadeIn()に("ミリ秒")で記述 |
| ``` |
| $("#carousel-example-generic").on("slid.bs.carousel",function() { |
| $(".carousel-caption").fadeIn("5000"); |
| }); |
| ``` |
| ③Obj変数に条件を格納して呼び出す() |
| ``` |
| Obj = new Object(); |
| Obj.duration = 5000; |
| $("#carousel-example-generic").on("slid.bs.carousel",function() { |
| $(".carousel-caption").fadeIn(Obj); |
| }); |
| ``` |
| ④Obj変数に条件を格納して呼び出す("") |
| ``` |
| Obj = new Object(); |
| Obj.duration = 5000; |
| $("#carousel-example-generic").on("slid.bs.carousel",function() { |
| $(".carousel-caption").fadeIn("Obj"); |
| }); |
| ``` |
| ###ソースコード |
| __HTML__ |
| ``` |
| <section class="carousel-size"> |
| <div id="carousel-example-generic" class="carousel slide" data-interval="8000"> |
| <div class="carousel-inner"> |
| <div class="item active"> |
| <img src="images/slide1.jpg" alt="slide1" width="100%"> |
| <div class="carousel-caption"> |
| 文章 |
| </div> |
| </div> |
| <div class="item"> |
| <img src="images/slide2.jpg" alt="slide2" width="100%"> |
| <div class="carousel-caption"> |
| 文章 |
| </div> |
| </div> |
| <div class="item"> |
| <img src="images/slide3.jpg" alt="slide3" width="100%"> |
| <div class="carousel-caption"> |
| 文章 |
| </div> |
| </div> |
| <div class="item"> |
| <img src="images/slide4.jpg" alt="slide4" width="100%"> |
| <div class="carousel-caption"> |
| 文章 |
| </div> |
| </div> |
| </div> |
| <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> |
| <span class="glyphicon glyphicon-chevron-left"></span> |
| </a> |
| <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> |
| <span class="glyphicon glyphicon-chevron-right"></span> |
| </a> |
| </div> |
| </section> |
| ``` |
| __CSS__ |
| ``` |
| .carousel-inner { |
| padding: 0; |
| } |
| .carousel-caption { |
| bottom: 25%; |
| display: none; |
| ``` |
| ### |
| おそらくトンチンカンなことをしているかもしれませんが、どうかアドバイスいただけませんでしょうか。 |
| ご確認お願いいたします。 |
| ご確認お願いいたします。 |
| ###現状 |
| fadeInに時間を記述しても一定のスピード（約1秒）でfadeInしてしまいます。 |
| ###環境 |
| ブラウザ：クローム |
| OS：Windows |
| エディタ：Atom |
