problems with javascript if and else

Question

I have a Element (nav) that gets hidden or shown, when another element (#aNav) gets clicked.

That already runs fine.

But now i want, that the clicked element (#aNav), itself, gets some changed styles. These styles shall also be changed, wether the (nav) element is shown or not. On another click, the else section is not performed.

Here is the code:

function nav(){
$('#aNav').click(function() {

    //changes the value of left
    var $lefter = $("nav");
    $lefter.animate({
        left: parseInt($lefter.css('left'),10) == 0 ?
            -$lefter.outerWidth() : 
            0
    });

    left = $("nav").css("left");
    if( left == 0 ) {
        $("#aNav div").css({
            "border-right":"33px solid transparent",
            "border-left":"0 solid transparent"
        });

    } else {
        $("#aNav div").css({
            "border-left":"33px solid transparent",
            "border-right":"0 solid transparent"
            });
        }

    });
};
$(document).ready(function(){
    nav();
});

I only want the else section to be executed. Maybe someone can help.

border-left being > 0 won't change left property value, so you will always get the first part of the if...else — LexLythius, Jun 24 '13 at 17:15
i know, but that doesn't have anything to do with, what i want — Slotty Bon, Jun 24 '13 at 17:17
Two more things: 1) assuming that `.css("left")` will always return a bare integer is fragile, and 2) declare variable left with `var left`, you're leaking a variable into the global scope. — LexLythius, Jun 24 '13 at 17:17
http://stackoverflow.com/questions/4278148/jquery-cssleft-returns-auto-instead-of-actual-value-in-chrome This may be your issue. — 000, Jun 24 '13 at 17:18

score 0 · Answer 1 · answered Jun 24 '13 at 17:18

It looks like you may be checking the left property of nav during the animation, in which its not 0.

If you move the rest into a complete function on the animate does it work? Something like so:

function nav(){
  $('#aNav').click(function() {
    //changes the value of left 
    var $lefter = $("nav");
    $lefter.animate({
        left: parseInt($lefter.css('left'),10) == 0 ?
            -$lefter.outerWidth() : 
            0
    }, function(){

      left = $("nav").css("left");
      if( left == 0 ) {
        $("#aNav div").css({
            "border-right":"33px solid transparent",
            "border-left":"0 solid transparent"
        });

      } else {
        $("#aNav div").css({
            "border-left":"33px solid transparent",
            "border-right":"0 solid transparent"
        });
      }
    });
  });
};
$(document).ready(function(){
  nav();
});

You may also need to check the property outside of the animation complete function like you had before

score 0 · Answer 2 · answered Jun 24 '13 at 17:18

Try like this.....animate with complete may work.....

$lefter.animate({
    left: parseInt($lefter.css('left'),10) == 0 ?
            -$lefter.outerWidth() : 
            0
    },
  complete: function() {
      left = $("nav").css("left");
    if( left == 0 ) {
        $("#aNav div").css({
            "border-right":"33px solid transparent",
            "border-left":"0 solid transparent"
        });

    } else {
        $("#aNav div").css({
            "border-left":"33px solid transparent",
            "border-right":"0 solid transparent"
            });
        }

    });
    });

score 0 · Accepted Answer · answered Jun 24 '13 at 17:26

jQuery's css() method will return the value and units of the left property, so it will never be 0: JSFiddle demo

To make the value in left be an integer, you can use parseInt, which will parse until it runs into a non-numeric value:

left = parseInt($("nav").css("left"), 10);

score 0 · Answer 4 · answered Jun 24 '13 at 17:26

Set a flag in data(), and use that to keep track of clicks instead as it's more accurate :

$(document).ready(function () {
    $('#aNav').on('click', function () {
        var nav  = $("nav"),
            left = !$(this).data('state') ? ~nav.outerWidth() : 0;

        nav.animate({left: left}, 600);
        $(this).data('state', !$(this).data('state'))
               .find('div').css({
                   borderRight : (left===0?33:0)+'px solid transparent',
                   borderLeft  : (left===0?0:33)+'px solid transparent',
                }
        );
    });
});

problems with javascript if and else

4 Answers4