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:
- Click
- Delay start of animation based on data-delay
- Loop animation twice with left or right set from data-right