Animation delay

I have wrote some animation code, and it's what I class as old school. As you can see, there is a lot of repeating code. Ideally, I would like to be able to take the delay and left or right position from a data attribute set on the button itself:

```
$(".click").click(function(){
$(this).delay(400).animate({bottom:'30px'},100);
$(this).animate({left:'5px'},50);
$(this).animate({left:'0px'},50);
$(this).animate({left:'5px'},50);
$(this).animate({left:'0px'},50);
$(this).animate({left:'5px'},50);
$(this).animate({left:'0px'},50);
$(this).animate({bottom:'0px'},100);
$(this).animate({bottom:'30px'},100);
$(this).animate({left:'5px'},50);
$(this).animate({left:'0px'},50);
$(this).animate({left:'5px'},50);
$(this).animate({left:'0px'},50);
$(this).animate({left:'5px'},50);
$(this).animate({left:'0px'},50);
$(this).animate({bottom:'0px'},100);
});
$(".clickJerry").click(function(){
$(this).delay(200).animate({bottom:'30px'},100);
$(this).animate({left:'5px'},50);
$(this).animate({left:'0px'},50);
$(this).animate({left:'5px'},50);
$(this).animate({left:'0px'},50);
$(this).animate({left:'5px'},50);
$(this).animate({left:'0px'},50);
$(this).animate({bottom:'0px'},100);
$(this).animate({bottom:'30px'},100);
$(this).animate({left:'5px'},50);
$(this).animate({left:'0px'},50);
$(this).animate({left:'5px'},50);
$(this).animate({left:'0px'},50);
$(this).animate({left:'5px'},50);
$(this).animate({left:'0px'},50);
$(this).animate({bottom:'0px'},100);
});
$(".clickRight").click(function(){
$(this).delay(400).animate({bottom:'30px'},100);
$(this).animate({right:'5px'},50);
$(this).animate({right:'0px'},50);
$(this).animate({right:'5px'},50);
$(this).animate({right:'0px'},50);
$(this).animate({right:'5px'},50);
$(this).animate({right:'0px'},50);
$(this).animate({bottom:'0px'},100);
$(this).animate({bottom:'30px'},100);
$(this).animate({right:'5px'},50);
$(this).animate({right:'0px'},50);
$(this).an

It would be nice if there was a JsFiddle to go along with this. Below is the code you posted refactored to utilize event delegation so you don't need to repeat the click handlers. Plus data-* HTML attributes are used to parameterize certain things. Lastly we should be able to utilize jQuery's API a little more efficiently since most function calls in jQuery return the jQuery object itself, allowing you to chain the method calls together:

$(document.documentElement)
  .on("click", ".clickJerry, .clickRight, .click", function(event) {
    var element         = event.delegateTarget,
        delay           = Number(element.getAttribute("data-pulsate-delay")),
        horizontalSpeed = Number(element.getAttribute("data-pulsate-horizontal-speed")) || 50,
        verticalSpeed   = Number(element.getAttribute("data-pulsate-vertical-speed")) || 100;

    $(element)
      .delay(delay)
      .animate({bottom:'30px'},verticalSpeed)
      .animate({right:'5px'},horizontalSpeed)
      .animate({right:'0px'},horizontalSpeed)
      .animate({right:'5px'},horizontalSpeed)
      .animate({right:'0px'},horizontalSpeed)
      .animate({right:'5px'},horizontalSpeed)
      .animate({right:'0px'},horizontalSpeed)
      .animate({bottom:'0px'},verticalSpeed)
      .animate({bottom:'30px'},verticalSpeed)
      .animate({right:'5px'},horizontalSpeed)
      .animate({right:'0px'},horizontalSpeed)
      .animate({right:'5px'},horizontalSpeed)
      .animate({right:'0px'},horizontalSpeed)
      .animate({right:'5px'},horizontalSpeed)
      .animate({right:'0px'},horizontalSpeed)
      .animate({bottom:'0px'},verticalSpeed);
  });

Without a JsFiddle, I'm not sure if the code you posted, or my refactored version even works.

StackExchange Code Review Q#57008, answer score: 2