3
\$\begingroup\$

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
\$\endgroup\$
2
\$\begingroup\$

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.

\$\endgroup\$
1
  • \$\begingroup\$ thank you very much for taking the time to answer this one, this gives me something to work on, if it does not work i should be able to fix it from there, thank you \$\endgroup\$
    – odd
    Jul 16 '14 at 9:53

This site is temporarily in read only mode and not accepting new answers.

Not the answer you're looking for? Browse other questions tagged .