return opposite Boolean value in one line

Question

Common Javascript knowledge (or any programming language really) tells us that using !variable will equal the opposite value when it's Boolean (or converted to Boolean in a conditional, etc).

I have this Javascript:

$(document).ready(function () {    
    var addEvent = function (element, myEvent, fnc) {
        return ((element.attachEvent) ? element.attachEvent('on' + myEvent, fnc) : element.addEventListener(myEvent, fnc, false));
    };
    var openBar = false;
    addEvent(document.getElementById('toggle'), 'click', function (event) {
        var toggler = event.currentTarget,
            barWrap = document.getElementById('left-wrap'),
            newSize = (!openBar) ? 20 : 0;
        $(barWrap).animate({
            width: (newSize / 100 * window.innerWidth)
        }, {
            queue: false,
            duration: 300,
            step: function (now) {
                toggler.style.right = now + 'px';
                //barWrap.outerWidth = now;
                document.body.style.marginRight = now + 'px';
            },
            complete: function () {
                newSize = (newSize === 20) ? '20%' : '0%';
                document.body.style.marginRight = newSize;
                toggler.style.right = newSize;
                barWrap.style.width = newSize;
            }
        });
        return !openBar;
    });
});

...that I threw into this JSFiddle ...which will show it open the toggle bar but not close it...with a lot of fluffy HTML and CSS too prettify it for y'all.

Now, why on earth does the 3rd to last line NOT return the opposite value as it should? I have successfully used the following:

return openBar = !openBar;

but for some reason browsers and JSfiddle and JShint like to get mad when I do because they expect a conditional or value instead of assignment. But they don't fail to load. I also know I can use:

openBar = !openBar;
return openBar;

or even

openBar = !openBar;
return;

but I like to minimize everywhere I can and really just want to understand why this fundamentally is failing to work for me so I can correct it in the future.

Is this in anyway incompatible with another browser (using Chrome 30 and Firefox 25) or possibly going to error out somewhere I'm not anticipating?

Or is it more of an inconvenience/warning that I can ignore (like those things telling me to use === instead of == when comparing 0 when I know the result can only be a number)?

Answer 1

To the best of my knowledge, you have to explicitly re-assign your original openBar variable for it to work. I'm interested in seeing an example of what makes you think otherwise. I made this small modification and removed the return:

newSize = (openBar = !openBar) ? 20 : 0;

http://jsfiddle.net/a9NPG/1/ (although I read that you're not really interested in it.)

Answer 2

Array.reverse() is a nice little fella:

DEMO

$(function () {

    var $toggler = $('#toggle'),
        $barWrap = $('#left-wrap'),
        $doc     = $('body'),
        newSize  = ['0', '20'];

    $toggler.on('click', function(){
        var winW = window.innerWidth,
            perc = newSize.reverse()[0],
            px   = perc / 100 * winW; 
        console.log( px );
        $barWrap.animate({   width : px });
        $toggler.animate({   right : px });
        $('body').animate({ marginRight: px }); 
    }); 

});