带有切换按钮的jQuery幻灯片动画div每隔一次而不是每次都起作用

Question

I'm trying to get a simple side navigation bar which you can hide and unhide with a single button.

So far I have it worknig but only every other click, so click to hide works, then does nothing, next click unhides, nothing etc. Yet I have to button set to an image to change on every click, and that is working.

What I have so far is....

HTML:

<div id="navBar-control">
    <a href="#" id="toggle-slide-button">
        <img src="http://i.imgur.com/8BMxPsC.png" width="50px" height="50px" />
    </a>
</div>    

<div id="navBar">
    <div class="navBtn navBtnText">
        Calculator
    </div>
    <div class="navBtn navBtnText">
        About
    </div>
    <div class="navBtn navBtnText">
        Other Services
    </div>
</div>

Script:

var state = false;

$("#toggle-slide-button").click(function () {
    if (!state) {
        $('#navBar').animate({width: "toggle"}, 1000);
        $('#toggle-slide-button img').attr('src', 'http://i.imgur.com/K3MG7gT.png');

          state = true;
        }
    else {
          $('#mnavBar').animate({width: "toggle"}, 1000);
          $('#toggle-slide-button img').attr('src', 'http://i.imgur.com/8BMxPsC.png');

          state = false;
        }
});

and if it matters, CSS:

#navBar{    
    background-color: #660000;
    height: 780x;
    width: 80px;
}

.navBtn{    
    background-color: #660000;
    color: white;
    width: 80px;
    height: 70px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,.2);
    opacity: 1;
    font-size: 12px;
    text-align: center;
}

.navBtnText {
    line-height: 120px;
    vertical-align: bottom;
}

.navBtn:hover{
   background-color:#990000;
}

#navBar-control {
    width: 50px;
    height: 100%;
    padding: 0 15px;
    background-color: #000;
}

Fiddle of this: http://jsfiddle.net/GUjPA/91/

I have been basing this off this fiddle: http://jsfiddle.net/GUjPA/13/ This has the desired behavior only that it is on the right of the screen instead of the left. The script I'm using is exactly the same, and besides different colours and size of side bar, its essentially exactly the same.

Answer 1

You have a mistake here:

$('#mnavBar').animate({width: "toggle"}, 1000);

must be

$('#navBar').animate({width: "toggle"}, 1000);

http://jsfiddle.net/GUjPA/94/ here works

Answer 2

var state = false;

$("#toggle-slide-button").click(function () {
    if (!state) {
      $('#navBar').animate({width: "toggle"}, 1000);
      $('#toggle-slide-button img').attr('src', 'http://i.imgur.com/K3MG7gT.png');

      state = true;
    }
    else {
      $('#navBar').animate({width: "toggle"}, 1000);
      $('#toggle-slide-button img').attr('src', 'http://i.imgur.com/8BMxPsC.png');

      state = false;
    }
});

try this: you had added an m to the second call to #navbar simplified in fiddle