JQuery not finishing (repeating animation instead)

Question

Can anyone explain why my .close click function isn't completing, but rather just getting nearly finished and bouncing back to it's original state before close button is clicked?

Opening the menu works just fine, So I tried to essentially remove all css classes and do everything backwards but it doesn't seem to be working; I've recreated the basic problem here; http://jsfiddle.net/gavinfriel/MvQsT/1507/

Here's my JS that's being problematic

$(document).ready(function() {
  $(".close").click(function() {
    $(this).animate({
      'opacity': '0'
    }, 200);
    $("#project3").animate({
      'height': '50px'
    }, 1500);
    $("#project3").removeClass("cursor-fix");
    $("#project3").removeClass("no-info");
    $("#project3").removeClass("stick-subtitle");
    $(".dark3").removeClass("project-open");
    $(".toggle-more").css("display", "none");
  });
});

All help appreciated!

Answer 1

Your element .close is inside #project3 use e.stopPropagation() on .close click for resolve your issue.

Try here: http://jsfiddle.net/2uth18rq/

$(".close").click(function(e) {
     e.stopPropagation()
    $(this).animate({
      'opacity': '0'
    }, 200);
    $("#project3").animate({
      'height': '50px'
    }, 1500);
    $("#project3").removeClass("cursor-fix");
    $("#project3").removeClass("no-info");
    $("#project3").removeClass("stick-subtitle");
    $(".dark3").removeClass("project-open");
    $(".toggle-more").css("display", "none");
  });