尝试使用 if 语句赋值 jQuery

Question

我有不同的"抽屉"，可以滑动打开和关闭以响应页面上的导航链接。 我正在使用一些jQuery来打开和关闭它们，并根据打开的"抽屉"更改页面背景和链接颜色。

我还使用一些jQuery来淡化链接上的悬停颜色。 一切都工作正常，除了在鼠标退出时让链接返回到新的基色。 它始终默认为原始 css 值。 所以，我知道我必须进入以下内容并根据我希望链接在鼠标退出时返回的颜色来更改 .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";
      }

Answer 1

可见性：隐藏或不透明度：0 的元素被视为可见，因为它们仍然占用布局中的空间。 - jQuery API

这就是为什么你的第二个如果总是被击中。

你必须用display: none隐藏它

仅供参考

可见元素是不是以下元素的元素：

• 设置为display:none
• 具有type="hidden"的表单元素
• 宽度和高度设置为 0
隐藏
• 的父元素（这也隐藏了子元素）