CODEWITHSUNDEEP
jquery
odd
odd

Reputation: 449

Repeatable animation with variables from data attributes

I am trying to create a repeatable animation with 2 values coming from data attributes set on the link

this is what i have so far and as you can see there is too much repeated code.

$(".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);
});
$(".clickRight").click(function(){
  $(this).delay(200).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);;
});

what i ideally would like to happen is the user clicks a link and the delay is set from data-delay and left | right is set from data-pos e.g.

<a href="#" data-delay="400" data-pos="left">click Left</a>
<a href="#" data-delay="200" data-pos="right">click Right</a>

i would then need this animation to run only twice with the above values set appropriatly

$(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);

Upvotes: 0

Views: 43

Answers (1)

emerson.marini
emerson.marini

Reputation: 9348

You can't use a variable as a property name for the animation, so you can create anonymous objects containing these particular properties to animate:

$(function() {
    $(".click").on("click", function () {
        // You can't use a variable as a property
        // name for the animation, so you can create
        // anonymous objects containing these particular
        // properties to animate.
        var direction1 = {};
        direction1[$(this).data("pos")] = "5px";
        var direction2 = {};
        direction2[$(this).data("pos")] = "0px";

        // These below are just to simplify.
        var direction3 = {};
        direction3["bottom"] = "30px";
        var direction4 = {};
        direction4["bottom"] = "0px";

        // The delay.
        var delay = $(this).data("delay");

        // Here, instead of repeating the $(this) selector, you can
        // just chain the .animate() calls.
        $(this)
            .delay(delay)
            .animate(direction3, 100)
            .animate(direction1, 50)
            .animate(direction2, 50)
            .animate(direction1, 50)
            .animate(direction2, 50)
            .animate(direction1, 50)
            .animate(direction2, 50)
            .animate(direction4, 100)
            .animate(direction3, 100)
            .animate(direction1, 50)
            .animate(direction2, 50)
            .animate(direction1, 50)
            .animate(direction2, 50)
            .animate(direction1, 50)
            .animate(direction2, 50)
            .animate(direction4, 100);
    });
});

Demo

Upvotes: 1

Related Questions