ページ読み込み時に要素をフェードインさせるjQueryが動かない

Question

現在、li要素をゆっくりフェードインさせるページを作っているのですが、
うまく動かない時があります。
（→参照させていただいたサイト）

<main>
	<a href="/">
		<img src="https://~/logo.png">
	</a>
	<nav>
		<ul>
			<li><a href="">about</a></li>
			<li><a href="">blog</a></li>
			<li><a href="">gallery</a></li>
		</ul>
	</nav>
</main>

  $(function(){
    $(window).load(function(){
      var delaySpeed = 130;
      var fadeSpeed = 1300;
      $('ul li').each(function(i){
        $(this).delay(i*(delaySpeed)).css({display:'block',opacity:'0'}).animate({opacity:'1'},fadeSpeed);
      });
    });
  });

上記のページを作ってみたところ、
アクセス時や、更新ボタンでページをリロードした際は綺麗にliがフェードインされるのですが、
<a href="/">で囲まれているロゴ画像のリンク（今いるページと同じ）をクリックして再度ページを表示させた際は、
jsが全く効かなくなるようです。
以下のように修正しても結果は同じくjs動かず、、でした。
・<a href="/"> の指定をURLに変える
・他ページから<a href="/"> を指定して遷移してくる

どなたか理由や解決方法をご教示いただけると嬉しいです。
よろしくお願いいたします。

Answer 1

Ruby on Railsでは、turbolinksというgemが使用されており、javascriptに関しては適切な読み込みをしないと、

$(window).load()

に関しては、期待した動作をしません

解決策として、

• turbolinksを無効にする
• jquery-turbolinksというgemを使用する

事が挙げられます

詳しくは、下記のサイト様もしくは検索していただけると良いかと思われます

Rails4のturbolinksについて最低でも知っておきたいこと
Turbolinksをオフにしないためにやったこと
Rails4でturbolinksをオフにする方法

Comments

[r1_1092829]

ありがとうございます！いただいた参照先を元に

・jquery-turbolinksというgemを使用する
・aタグを<a href="/" data-no-turbolink="1">hoge</a>

上記を実行した結果、問題なく動くことを確認できました。