Функция Toggle не работает

Question

У меня есть этот div (в форме блока), который я хочу переместить вправо и влево, щелкнув по нему. Идея заключается в том, что первое действие для переключения работает (что означает, что блок занимает 250 пикселей пространства слева), но не будет двигаться влево после того, как я снова нажму на него.

$(document).ready(function() 
{ 

    $("#block1").click(function() 
    { 
     var toggleState = true; 
     if (toggleState) 
     { 
      $("#block1").animate({left: '250px'}); 
     } 
     else 
     { 
      $("#block1").animate({left: '250px'}); 
     } 
     toggleState = !toggleState; 
    }); 
}); 

Answer 1

Вам нужно определить toggleState вне функции мыши, в противном случае его значение постоянно переписывается. Я также определил переменную с нулевым значением и изменил левое значение условия true, но ни одна из них не была вашей основной проблемой.

var toggleState; 

$("#block1").click(function() { 
    if (toggleState) { 
     $("#block1").animate({ 
      left: '10px' 
     }); 
    } else { 
     $("#block1").animate({ 
      left: '250px' 
     }); 
    } 
    toggleState = !toggleState; 
}); 

Demo

Answer 2

У вас есть переменная toggleState внутри функции, которую нужно переместить его снаружи.