Trying to assign jQuery value with if statement

Question

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";
      }

Perhaps neither drawer is visible, and so neither if statement gets triggered? You may try an if/else instead of 2 ifs. If I'm right, it will always take the else clause. — Alex Wayne
– Alex Wayne, Commented Jun 30, 2012 at 0:37
Assuming one of them is visible, it should work, but you don't really want the var keyword in front of the assignments in the if statement bodies. — James Allardice
– James Allardice, Commented Jun 30, 2012 at 0:38
@Rob you sure? Add an alert('A') to the case where drawer A is visible and make sure that code is running. — Alex Wayne
– Alex Wayne, Commented Jun 30, 2012 at 0:41
@Rob - That's probably the problem. Elements with visibility: hidden are considered visible. api.jquery.com/visible-selector — James Allardice
– James Allardice, Commented Jun 30, 2012 at 0:46

Zoltan Toth · Accepted Answer · 2012-06-30 00:46:00Z

2

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)

answered Jun 30, 2012 at 0:46

Zoltan Toth

47.8k12 gold badges132 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Rob Over a year ago

It is hidden with display: none

Zoltan Toth Over a year ago

Sure it is. Exactly according to list

Rob Over a year ago

Yes, so, if the method of hiding the div is proper. Why is my code not working?

Rob Over a year ago

Ok, here it is: jsfiddle.net/jbCNf/55 I Have it set so that there's a one variable original color. I want the links to fade back to whatever the color of the page they are on. My theory was to use the if statement to figure out which div was visible. I've also tried changing the originalColor variable in the functions that slide the divs but that didn't work either.

Collectives™ on Stack Overflow

Trying to assign jQuery value with if statement

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related