Click handler is called multiple times in jQuery animate

it should still fix some issue Unable to replicate. I suspect that you're misrepresenting — oversimplifying, mostly — your situation. To be precise, I believe you're dynamically adding those inputs, and calling $(".newContentLink").click(...) each time — which, naturally, keeps applying additional copies of the click handler to each .newContentLink in the page.
So the most recent input you've created has one copy of the click handler and appends one 1. The second most recent has two copies and appends 11. The third has three and appends 111, etc.

hope this fix your issue I am having a problem that I just cannot figure out. I took over an application that uses version 3 of the google maps API. I was not really familiar with it, but I was asked to adjust a few things. One of them entailed creating custom infoBubbles rather than using the default infoWindow's so that we could style them up nice. I found a class called infoBox that will do just this and followed some examples to get where I am now. However, my application requires that each overlay (polygon, polyline, or marker) have a delete button on the infoBox. The delete was working just fine with a jQuery click event when we were using the default infoWindow's but it is very peculiar now that I am using the infoBox instead. I have created a small test file that demonstrates the problem. The gist of it is that the first time you open an infoBox, the delete button routine is only run 1 time. But once you close the box, and open it again (or a different one), the routine runs multiple times. The more times you open infoBoxes, the more times the delete button is re-binding and in turn executing. I have things wrapped in a domready listener for the infoBox so that I can change the elements in the window to be specific to the properties of the object that's being clicked on. For some reason, the domready is firing multiple times (i thought it would only fire one time) and my delete click is being bound again. Before using the infoBox class, the regular infoWindow did not require a domready in order to use jQuery to change the title and description, and the click event was never bound over and over. I am at a total loss and have spent far too much time on this. Any help would be appreciated. A sample test file is as follows: , Try changing this:
$('.deleteLink').click(function(event) {})

I wish did fix the issue. Set the CSS of the element before animating it, making sure it's back at it's initial position with marginTop and can't be seen using opacity.
Add a stop() in their to prevent animations being queued and there you have it:

var color = ["blue", "purple", "green"];

$("#try-me").click(function() { 
    var colorClass = color[Math.floor(Math.random()*color.length)];
    $("#content")
        .css({opacity:0,marginTop:200})
        .removeClass()
        .addClass(colorClass)
        .stop(true,false)
        .animate({
            "margin-top": "50px",
            "opacity": "1"
        }, 700);
});

seems to work fine 1st: You need to use deg instead of borderSpacing to avoid reset every time
2nd: I create two functions one for rotate and another one to reset the rotation

$(document).ready(function(){
  $('#foo').on('click' , function(){ // element click event
    var rotate_deg = parseInt($(this).data('rotate')); // get the data-rotate attribute in this case will return -90 change it on html if you like
    var next_rotation_angle = rotate_deg - 90; //for a new rotation angle .. in this case I use rotate_deg * 2 change it as you like
    var Times = 3; // how many rotate available
    if(rotate_deg / 90 >= -Times){
      RotateIt($(this) , rotate_deg); // run a function to rotate the element 
      $(this).data('rotate' , next_rotation_angle); // append a new angle to data-rotate attribute
    }else{alert('Can not click any more')}
  });
  $('#reset_rotation').on('click' , function(){ // reset button click event
    ResetRotate($('#foo')); // reset the element rotation to 0
    $('#foo').data('rotate' , '-90');
  });
});
//function to rotate .. use this code to rotate any element you need by using RotateIt(element , rotate_deg);
function RotateIt(el , deg){
  $(el).stop().animate({deg: deg}, {
      step: function(now,fx) {
        $(this).css('-webkit-transform','rotate('+now+'deg)'); 
        $(this).css('-moz-transform','rotate('+now+'deg)');
        $(this).css('transform','rotate('+now+'deg)');
      },
      duration:'slow'
  },'linear');
}
// function to reset the rotate .. while deg here is 0 no need to set deg as an argument 
function ResetRotate(el){
  $(el).stop().animate({deg: 0}, {
      step: function(now,fx) {
        $(this).css('-webkit-transform','rotate('+now+'deg)'); 
        $(this).css('-moz-transform','rotate('+now+'deg)');
        $(this).css('transform','rotate('+now+'deg)');
      },
      duration:'slow'
  },'linear');
}

body {
    font-family: sans-serif;
}

#foo {
    width:100px;
    height:100px;
    position:absolute;
    top:100px;
    left:100px; 
    border-spacing: 0;
    background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo" data-rotate="-90">Text</div>
<p>See <a href="http://jsfiddle.net/ryleyb/ERRmd/">inspiration</a>
<button id="reset_rotation">Reset Rotation</button>