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\$
  • \$\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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.