0

ページのナビゲーションリンクに応じてスライドして開閉するさまざまな「引き出し」があります。私はいくつかのjQueryを使用して、それらを開いたり閉じたりして、開いている「引き出し」に応じてページの背景とリンクの色を変更しています。

また、リンクのホバーカラーをフェードするためにjQueryを使用しています。マウスアウトで新しいベースカラーに戻るリンクを取得することを除いて、すべてが正常に機能しています。デフォルトでは常に元のcss値になります。したがって、次の手順に進み、mouseoutでリンクを戻す色に応じて.mouseoutの色を変更する必要があることを私は知っています。

次の例のように変数を設定するだけで、すべてうまくいき、うまく機能します。

    var originalColor = "#123456";

    jQuery.fn.linkFader = function(settings) {
      settings = jQuery.extend({
        returnColor: originalColor,
        color: '#8dc63f',
        duration: 600
      }, settings);
      return this.each(function() {
        $(this).mouseover(function() { $(this).stop(true, true).animate({ color: settings.color },settings.duration); });
        $(this).mouseout(function() { $(this).stop(true, true).animate({ color: settings.returnColor },settings.duration); });
        $(this).click(function() { $(this).stop(true, true).animate({ color: settings.color },settings.duration); });
      });
    };

    $(document).ready(function() {
      $('.fader').linkFader({
      });
    });

しかし...次のように変数「originalColor」を割り当てようとすると失敗します。どの「引き出し」が開いているかを把握し、変数を適切な色に設定するためのスクリプトが必要です。私はここで何が間違っているのですか？

      var originalColor='';
      if($('#drawerA').is(":visible")){
        var originalColor = "#123456";
      }

      if($('#drawerB').is(":visible")){
        var originalColor = "#456789";
      }
4

1 に答える 1

2

visibility: hidden または opacity: 0 の要素は、レイアウト内のスペースを消費するため、visibleと見なされます。- jQuery API

それがあなたの2番目のifが常にヒットする理由です。

あなたはそれを隠す必要がありますdisplay: none

ご参考までに

可視要素は、そうでない要素です:

  • に設定display:none
  • フォーム要素type="hidden"
  • 幅と高さを に設定0
  • 非表示の親要素 (これにより、子要素も非表示になります)
于 2012-06-30T00:46:00.130 に答える