animation répétable avec des variables à partir des données attributs

Question

Je suis en train de créer une animation répétitive avec 2 valeurs provenant d'attributs de données définis sur le lien

ce que j'ai jusqu'à présent et comme vous pouvez le voir il y a trop répétais 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);; 
}); 

ce que je voudrais idéalement arriver est que l'utilisateur clique sur un lien et le retard est réglé de retard de données et à gauche | le droit est défini à partir de données-pos, par ex.

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

i alors besoin cette animation pour exécuter seulement deux fois avec les valeurs ci-dessus définies 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); 

Answer 1

Vous ne pouvez pas utiliser une variable comme nom de propriété pour l'animation, de sorte que vous pouvez créer anonyme objets contenant ces propriétés particulières pour animer:

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