jQuery slide animate div с кнопкой toggle работает каждый раз, а не каждый раз

Question

Я пытаюсь получить простую навигационную панель, которую вы можете скрыть и отобразить с помощью одной кнопки.

До сих пор у меня было worknig, но только каждый другой щелчок, поэтому нажмите, чтобы скрыть работы, затем ничего не делает, следующий щелчок скрывает, ничего и т. Д. Тем не менее, я должен установить кнопку, чтобы изображение менялось при каждом нажатии, и это работает.

То, что я до сих пор есть ....

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> 

Сценарий:

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

и если это имеет значение, 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; 
} 

Сценарий: http://jsfiddle.net/GUjPA/91/

Я основывал это на этой скрипке: http://jsfiddle.net/GUjPA/13/ Это имеет желаемое поведение только в том случае, если оно находится справа от экрана, а не слева. Сценарий, который я использую, точно такой же, и, кроме того, разные цвета и размер боковой панели, по существу, точно такие же.

Answer 1

У вас есть ошибка здесь:

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

должен быть

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

http://jsfiddle.net/GUjPA/94/ здесь работает

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

попробовать это: вы добавили в м ко второму вызову #navbar simplified in fiddle