CODEWITHSUNDEEP
jqueryvariablesif-statement
Rob
Rob

Reputation: 47

Trying to assign jQuery value with if statement

I have different "drawers" that slide open and closed in response to navigation links on my page. I'm using some jQuery to flip them open and closed, and change the page background and link colors depending on which "drawer" is open.

I'm also using some jQuery to fade the hover color on the links. Everything is working fine, except for getting the link to return to the NEW base color on mouseout. It always defaults to the original css value. So, I know I have to go into the following and change the .mouseout color depending on which color I want the link to return to on mouseout.

If I just set a variable like in the following example, all is well, it works beautifully.

    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({
      });
    });

BUT... If I try to assign the variable "originalColor" like the following, it fails. I need the script to figure out which "drawer" is open, and set the variable to the proper color. What am I doing wrong here?

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

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

Upvotes: 0

Views: 623

Answers (1)

Zoltan Toth
Zoltan Toth

Reputation: 47667

Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout. - jQuery API

That's why your 2nd if always gets hit.

You have to hide it with display: none

FYI

Visible elements are elements that are not:

  • set to display:none
  • form elements with type="hidden"
  • Width and height set to 0
  • A hidden parent element (this also hides child elements)

Upvotes: 2

Related Questions