質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
jQuery

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

Q&A

解決済

1回答

1704閲覧

JQueryのアニメーションが上手くいかない

narururu

総合スコア169

jQuery

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

0グッド

0クリップ

投稿2017/11/25 14:00

編集2017/11/25 15:06

###実現したいこと
JQueryで文字をfadeinさせたいです。
カルーセルの左右のインディケータをクリックすると、キャプション(画面中の文字)が浮かび上がってくるイメージです。

###現状
実際にコードを記述しても変化がありません。

###JQueryコード

$(function() { $(".left").on("click",function() { $(".carousel-caption").fadeIn("slow"); }); }); }); $(function() { $(".right").on("click",function() { $(".carousel-caption").fadeIn("slow"); }); }); });

###HTMLコード

<section class="carousel-size"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="8000"> <div class="carousel-inner"><!-- 変更 --> <div class="item active"> <img src="images/slide1.jpg" alt="slide1" width="100%"> <div class="carousel-caption"> 古くから、<br>料理する場、<br>暖をとる場として<br>家族の中心に置かれてきた囲炉裏。 </div> </div> <div class="item"> <img src="images/slide2.jpg" alt="slide2" width="100%"> <div class="carousel-caption"> 鉄瓶にゆらゆらと立ち上る湯気、<br>時折ぱちぱちと爆ぜる炭を<br>眺めていると、<br>時間がゆっくり、ゆっくりと<br>流れていきます。 </div> </div> <div class="item"> <img src="images/slide3.jpg" alt="slide3" width="100%"> <div class="carousel-caption"> 囲炉裏を囲み、<br>家族が心の中から温まる、<br>そんな場所を作りたくて始めました。 </div> </div> <div class="item"> <img src="images/slide4.jpg" alt="slide4" width="100%"> <div class="carousel-caption"> 1つ1つ丁寧に作られた囲炉裏は、<br>あなただけの、<br>世界にたった1つの作品となります。<br>是非、囲炉裏の持つ独自な趣を、<br>体感してください。 </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%; }

※カルーセルはBootstrap3で実装しています。

以上、ご確認お願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

CSSが無いんで答えようにも示していただいたコードでは検証しづらいです。

  • 要素指定がおかしいです。
    この場合.left carousel-controlではなく.leftでいいはずです。

  • $をつけ忘れています。またクラスを示す.がありません。
    × : ("carousel-caption").fadeIn();
    ○ : $(".carousel-caption").fadeIn();

わからないことがあるときは小さいところから出発してはいかがでしょうか?

例えば、これくらい小さなhtmlでお試しになってから、提示していただいたコードを改善していけばいいと思います。

html

1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <title>fadeIn</title> 6 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 7 <style> 8 .target { 9 display: none; 10 } 11 .str { 12 font-size: 32px; 13 color: green; 14 } 15 </style> 16 <script> 17 $(function(){ 18 $("#butt").click(function(){ 19 $(".target").fadeIn(); 20 }); 21 }); 22 </script> 23 </head> 24 <body> 25 <span class="target str">Fade In</span> 26 <br /> 27 <button id="butt">フェードイン</button> 28 </body> 29</html>

追記

作ってみたので参考にどうぞ。

html

1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <title>fade-in</title> 6 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 7 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" /> 8 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 9 <style> 10 .carousel-inner { 11 padding: 0; 12 } 13 .carousel-caption { 14 bottom: 25%; 15 display: none; 16 } 17 </style> 18 <script> 19 $(function() { 20 $(".carousel-caption").fadeIn(); 21 $("#carousel-example-generic").on("slide.bs.carousel",function() { 22 $(".carousel-caption").fadeOut("fast"); 23 }); 24 $("#carousel-example-generic").on("slid.bs.carousel",function() { 25 $(".carousel-caption").fadeIn(); 26 }); 27 }); 28 </script> 29 </head> 30 <body> 31 <section class="carousel-size"> 32 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="8000"> 33 <div class="carousel-inner"><!-- 変更 --> 34 <div class="item active"> 35 <img src="images/slide1.jpg" alt="slide1" width="100%"> 36 <div class="carousel-caption"> 37 古くから、<br>料理する場、<br>暖をとる場として<br>家族の中心に置かれてきた囲炉裏。 38 </div> 39 </div> 40 <div class="item"> 41 <img src="images/slide2.jpg" alt="slide2" width="100%"> 42 <div class="carousel-caption"> 43 鉄瓶にゆらゆらと立ち上る湯気、<br>時折ぱちぱちと爆ぜる炭を<br>眺めていると、<br>時間がゆっくり、ゆっくりと<br>流れていきます。 44 </div> 45 </div> 46 <div class="item"> 47 <img src="images/slide3.jpg" alt="slide3" width="100%"> 48 <div class="carousel-caption"> 49 囲炉裏を囲み、<br>家族が心の中から温まる、<br>そんな場所を作りたくて始めました。 50 </div> 51 </div> 52 <div class="item"> 53 <img src="images/slide4.jpg" alt="slide4" width="100%"> 54 <div class="carousel-caption"> 55 1つ1つ丁寧に作られた囲炉裏は、<br>あなただけの、<br>世界にたった1つの作品となります。<br>是非、囲炉裏の持つ独自な趣を、<br>体感してください。 56 </div> 57 </div> 58 </div> 59 <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> 60 <span class="glyphicon glyphicon-chevron-left"></span> 61 </a> 62 <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> 63 <span class="glyphicon glyphicon-chevron-right"></span> 64 </a> 65 </div> 66 </section> 67 </body> 68</html>

投稿2017/11/25 14:34

編集2017/11/25 15:15
namnium1125

総合スコア2043

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

narururu

2017/11/25 14:50

ご回答ありがとうございます。 cssを追加しました。 参考になればよいのですが。 因みにカルーセルはBootstrap3で実装しています。
namnium1125

2017/11/25 14:54

そういうことでしたか。できれば検証してみようと思います。 とりあえず上記で示した通りの点をまず改善してみてください。 あと`.carousel-caption`のcssですけど、`display: none;`を追加する必要があるかと。
namnium1125

2017/11/25 14:58

今気づいたんですけど、`}`の数もおかしいです。確認してください。m(_ _)m
narururu

2017/11/25 14:59

説明不足で、大変失礼いたしました。 頂いたコードを基に私もガンバってみます! 確かにdisplay: none;は必要ですよね。 最初は文字がない状態から映し出すので。 ありがとうございます。
namnium1125

2017/11/25 15:02

ちょっと待って。。まだありましたよミス。。orz $(.left carousel-control) ""を忘れてます。。
narururu

2017/11/25 15:10

わあ、たくさんミスがありますね。。すみません。 Bootstapでカルーセルのアニメーションが実装できるんですね(゜-゜)知らなかったです。 ちょっと調べてみます。 いろいろありがとうございます!
namnium1125

2017/11/25 15:13 編集

調べていらっしゃるところ申し訳ないんですが、作ってみたんで追記しておきます。 参考までに。 どうでもいいことですが私bootstrap今日初めて触りました。(^ ^;
narururu

2017/11/25 15:18

ええ!初めてなのにもうできたんですか! 私なんかずっと調べてるのに、全然だめです。 もし良ければ作成したコードを載せていただけるととても助かります。
namnium1125

2017/11/25 15:23

いえ、作った、もとい、触ったのは質問者様のコードだけですよ。参考までにと追記した内容が全てです。 所詮cssファイルとjsファイルですから。 詰まったら基本(javascript、html、css)に立ち返って確認するといいですよ。
narururu

2017/11/25 15:33

作ってくださったコード今確認しました。 すごいです!! ずっと試してできなかったことが、こんなすぐにできてしまうなんて! とても参考になります。 これでいろいろできそうです。 本当に助かりました。ありがとうございます☺☺☺
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問