Based off of Events and Scope video ... trying to get it so that it understands if the margin is greater than where it starts (5px) it will call the moveBack() function. This works but if someone clicks on a square twice before the animation has completed, it won't respond, since the margin-right must = 100px for the moveBack() to be called. Is …

animating squares right and left

$(function(){

  console.log(this);

	function moveRight(el) {
		$(el).animate({marginRight: 100 }, 1000);
	}

	function moveBack(el) {
		$(el).animate({marginRight: 5 }, 1000 );
	}

	$('#boxes li').on('click', function(){
			moveRight(this);	
			if ($(this).css("margin-right") === "100px" ) {
				moveBack(this);
			}
			
			
	}); 
})