Jqueryはイメージを1回だけ読み込み（「ページの読み込み」）、「DRY」のままにしておきますか？

Question

私は素晴らしい作品のjQueryの「アニメーション」関数を使用して、DIV背後から（内部のロゴ画像付き）のdivのPOP私のレールのサイトで簡単なアニメーションを持っています！

しかし、私はそれが正確に一度ランディングページ上で実行するために取得した後、他のすべてのページを横切ってページのリロードを置くのdiv滞在を作成する方法を見つけ出すことはできません。サイト全体のすべてのページの読み込みは毎回アニメーションを実行します。 （それはすべてのビューでレンダリングなってきた理由を説明）全体のサイトテンプレートのヘッダの一部を私はapplication.html.erbファイル内のアニメーションますjQueryのdiv要素を入れて、それは」 の。

私はちょうどコピーして貼り付けコードをパーシャルにし、ロゴは、各ページに表示する方法をのための個別のCSSエントリを作ることができる知っているが、私は私のコードのDRYを維持しようとしています。

ここに私のjavascriptです：

$(document).ready(function() 
{ 
    $('.logo .active-image').animate({ 
     opacity:1,   //set opacity 
     marginTop: "-90px", //move the image 'up' 90px 
     }, 5000);   //animate over 5 secs 
}); 

全体サイトテンプレート上のロゴ画像のdiv：

<div class="logo"> 
    <%= image_tag("../images/logo.png", :class => 'flying-image active-image') %> 
</div> 

ので、「Railsの-yが」使ってこれを行うにはDRY、方法があり、単にjqueryですか？

Answer 1

HTTP自体はステートレスですが、「これはユーザーXの最初のページビューですか？」などの状態が必要です。

これで、ユーザーのセッションにフラグを保存することも、別のCookieに格納することもできます。後者はJavaScriptのみを含む。擬似jQueryのクッキー機能を使用して、単なる例のJavaScript /クッキーソリューションの

ドラフト

if (!$.cookie('visited_before')) { 
    $('.logo .active-image').animate({ 
     opacity:1,   //set opacity 
     marginTop: "-90px", //move the image 'up' 90px 
     }, 5000 
    ); 
    $.cookie('visited_before', true); 
} 

。クッキーの処理にはおそらく十分なプラグインがあります。