Code had syntax error but worked. Need to understand why


#1

I was doing the exercise for "Push" menu. Initially, I had erroneously put a "." (dot) in-front of body so it looked like:


$('.body').animate({left:"285px"}, 200);

With above line my code was not getting accepted so I could not move to the next section, but the menu push was working in the console!!! Then I realized the it might be the dot and fixed it below and then the code got accepted. So my question is why did the menu work with the wrong code, that is with the dot in front of body?


var main = function(){
$('.icon-menu').click(function(){
$('.menu').animate({left:"0px"}, 200);
$('body').animate({left:"285px"}, 200);
});
$('.icon-close').click(function(){
$('.menu').animate({left:"-285px"}, 200);
$('body').animate({left:"0px"}, 200);
});
};

$(document).ready(main);


#2

Hey Yusuf,

This is a great question :)
So when you're selecting .body, since there is no .body, nothing happens to it. It stays still. But there is a .menu, so .menu gets to move. Since .menu is moving, but .body isn't, instead of sliding them both over to the right 285px (which is the desired effect), the menu gets slid 285px to the right - over top of the body, covering it up (some people like that effect, some don't - it's not what the exercise wanted)
I hope this helps!


#3

Thanks zystvan,
I see the difference now that you pointed it out. At first it seemed like the same action, but there is a subtle difference between the two options.


#4

Yeah - programming is full of small subtleties like this :)