Move (this) element of an array to the end

Question

I have some html elements that i want to move when clicking on them using jQuery. I've tried this but it didn't work

var element = $('.picAll');
var arr = jQuery.makeArray(element);

arr[3].animate({"margin":"90px 0 0 35%", "z-index":"1"});
arr[2].animate({"margin":"35px 0 0 20%", "z-index":"4"});
arr[1].animate({"margin":"55px 0 0 25%", "z-index":"3"});
arr[0].animate({"margin":"75px 0 0 30%", "z-index":"2"});

$('.picAll').click(function() {
element(this).push();
});

I'm still beginner so i'm sorry for the bad code...

Answer 1

Push element to the end of array

 var b = $("b").get(); b.push(b.shift()); $("body").append( b ); // `b` or `$(b)` 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <b>a</b><b>b</b><b>c</b> 

Set / Store custom animation properties

Store your Object literal you'll later pass to the .animate() into a custom Element property (ie: anim ).
On element click simply recall it's property.
PS: note that you cannot animate z-index ... but here you go:

 var pic = $('.picAll'); pic[3].anim = {margin:"90px 0 0 35%", zIndex:"1"}; pic[2].anim = {margin:"35px 0 0 20%", zIndex:"4"}; pic[1].anim = {margin:"55px 0 0 25%", zIndex:"3"}; pic[0].anim = {margin:"75px 0 0 30%", zIndex:"2"}; pic.click(function() { $(this).animate(this.anim); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img src="favicon.ico" class="picAll"> <img src="favicon.ico" class="picAll"> <img src="favicon.ico" class="picAll"> <img src="favicon.ico" class="picAll">