質問編集履歴

1 現状と環境を追記

narururu

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
  • JavaScript

    25593 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    9987 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Bootstrap

    1705 questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る