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

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

新規登録して質問してみよう
ただいま回答率
85.35%
Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

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

jQuery

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

Q&A

解決済

2回答

947閲覧

jQuery fadeINについて

popomarudasi

総合スコア20

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2020/05/29 05:37

編集2020/05/29 06:26

RAILSアプリにjQueryを入れ始めました。
fadeInメソッドを使ってトップページの見出し文字をゆっくり表示させるようにしました。
最初にサイトに訪れたり更新のときはfade Inでゆっくり表示されるのですが
link_to(アンカー)でトップページに飛んだ際はfadeInが起こらず表示されません。
アンカー先でfadeInを起こすにはどのように指定したら良いのでしょうか?

トップページ ビュー (/)

top.html.erb

1 <div class="top-message" id="top-message"> 2 <h1>言葉はヒトを豊かにする。</h1> 3 <p>いまの気持ちを言葉にしよう!</p> 4 </div>

トップページ CSS

home.css

1 .top-message{ 2 text-align:center; 3 display: none; 4 }

トップページ js

home.js

1$(function() { 2 $("#top-message").fadeIn(1400); 3});

アプリケーションHTML

application.html.erb

1 <div class="header-logo"> 2 <%= link_to("トップページ", "/") %> 3 </div>

↑目次のこのリンクからトップページに飛ぶとCSSのdisplay:none;は反映されてますが、jsのfadeInは起こらないです。
ここでとんだあとにもfadeInを起こしたいです。

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

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

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

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

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

m.ts10806

2020/05/29 05:46

>【超初心者質問】 何をもってこうつけたのか分かりませんが、文字数を浪費しているだけなので、質問に初心者アイコンをつけるにとどめてください。 あと、自身のコードをご提示ください。でないと問題解決に繋がるアドバイスにはならないかと
popomarudasi

2020/05/29 05:48

申し訳ないです。 こちら解決済みにして 質問しなおします。 不快な思いをさせて申し訳ありません。
m.ts10806

2020/05/29 05:51

いえ質問は編集できますので新たに立てないでください
m.ts10806

2020/05/29 05:52

あと、指摘する人で不快になってる人はあまりいないかと。 単に質問の不備をなおしてもらいたいだけなので。でないと問題解決しませんし、そこで解決せず悶々とするのは質問者だけです。
popomarudasi

2020/05/29 06:04

ご指摘ありがとうございました。 編集致しましたので、ご確認ください。 教えていただければ幸いです。
yambejp

2020/05/29 06:09

ソースを```で囲むなど適切なマークダウンをしてください
popomarudasi

2020/05/29 06:16

皆様ご指摘ありがとうございました。 次回以降質問の際気をつけます。
m.ts10806

2020/05/29 06:20

マークダウンのcodeは今からでもやっておいたほうが。 いつくるか分からないにやってみないまま「次回」と後回しにすると大抵忘れます
popomarudasi

2020/05/29 06:27

囲ってみました。 今までなんとなく使っていたので今回の件で非常に勉強になりました。 ありがとうございました。
guest

回答2

0

ベストアンサー

turbolinksとやらを使っている場合$(function() {}); では反応しないかも。

【Rails5でjqueryを動かす方法 - Qiita】
https://qiita.com/hiroyayamamo/items/b258acbaa089d9482c8a

投稿2020/05/29 06:08

kei344

総合スコア69606

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

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

popomarudasi

2020/05/29 06:14

載せて頂いたサイトにて解決することができました。 ご指摘とご解答ありがとうございました。
guest

0

すみませんでした。
質問しなおします。

投稿2020/05/29 05:48

popomarudasi

総合スコア20

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

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

popomarudasi

2020/05/29 06:03

すみませんでした。 質問し直しでなく、編集致しました。 よろしくお願い致します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問