Stylesheet ToggleにFadeInを追加

Question

私はこのスタイルシートトグルスクリプトを使用していますが、関数/クリックバインドにfadeInをどこに追加するのか分かりません。私はバインド内と後に追加しようとしましたが、動作していないようです。

以下のコードは、JS

$.stylesheetInit(); 
    $(function() { 
     $('#toggler').bind('click', function(e) { 
      $.stylesheetToggle(); 
      return false; 
     }); 
     $('.styleswitch').bind('click', function(e) { 
      $.stylesheetSwitch(this.getAttribute('rel')); 
      return false; 
     }); 
    }); 

そして、ここではそれがリンクされJSから呼び出しているものです、私は今、それは素晴らしいのsans-フェードに

を働いてきたものを反映していますStylesheetToggle

Answer 1

何あなたは正確にやろうとしていますか？

styleswitch scriptお客様のウェブサイトを表示している間に訪問者がサイトのCSSスタイルシートを動的に切り替えることができるように作成されました。また、スクリプトはスタイルシートの選択をクッキーに保存します。

スタイルシートが変更されると、新しいスタイルシートがページ全体に適用されます。新しいスタイルシートは、異なるサイズ、配置、および表示プロパティをすべての要素に適用することがあるため、ブラウザはすべての要素を一度に再描画する必要があります。

"フェーディング"エフェクトは通常、ページ全体ではなくページ上の単一の要素または要素のグループに適用されます。 jQueryで要素を「fadeOut」すると、不透明度プロパティが徐々に「0」（完全に透明）に変更されます。 「フェードイン」すると、その不透明度が上がり、再び表示されます。 jQueryには、「fadeIn」、「fadeOut」、および「fadeToggle」機能が組み込まれています。この機能を使用して、ページ上の要素の表示を徐々に切り替えることができます。

jQueryのfadeToggle：http://api.jquery.com/fadetoggle/

jQueryのフェードイン：

はjQueryのでfadeアニメーションについての詳細を調べるには、いくつかの有用な例を持ってjQueryのドキュメント、直接見ることができhttp://api.jquery.com/fadeIn/

jQuery fadeOut：http://api.jquery.com/fadeOut/

一般に、fadeの移行を適用するのは実際には意味がありませんあなたのページのすべての要素、または 'body'に適用されます。ページ全体を隠したり、新しいスタイルシートを適用したり、新しいスタイルでページを表示したりする場合は、ページ全体をカバーする要素（位置：固定、上： 0、左：0、幅：100vw、高さ：100vh）、ページをカバーするために 'fadeIn'し、上記のスクリプトを使って新しいスタイルシートを適用し、新しいページを表示するために 'fadeOut'

このカスタムjQueryのアニメーションとコールバックを使用して達成することができ - animate機能を使用して構築されています：

jQueryのアニメーション：私はこれが役に立てば幸い

を！