The problem is that I WANT TO animate menu to "300px" after you click on the "theButton" element. As you can see the .menu "left-position" is equal to -300px. I want the menu to be "300px" instead of "-300px" when you click on the "theButton" element.There are no problems showing in the console but it doesn't works. I don't know what the problem is.


.menu {
background: url('');
color: blue;
border: dashed;
margin-right: 1000px;
padding-bottom: 300px;
position: fixed;
left: -300px;

.para {
background-color: yellow;
color: black;
text-align: center;

 .theButton { 
               background-color: white;
			   color: black


function main() {
$('.theButtton').click(function() {
left: '300px'
}, 200)



can you give me your index.html code?