Animation delay

Question

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).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 is ideally what I would like to happen:

1. Click
2. Delay start of animation based on data-delay
3. Loop animation twice with left or right set from data-right

Answer 1

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.