將數組的（this）元素移到末尾

Question

當我使用jQuery單擊它們時，我有一些html元素要移動。 我已經嘗試過了，但是沒有用

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

我仍然是初學者，因此對代碼錯誤感到抱歉...

Answer 1

將元素推到數組的末尾

 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> 

設置/存儲自定義動畫屬性

存儲您的Object文字，您將在稍后將.animate()傳遞到自定義 Element屬性（即anim ）中。
在元素上單擊，只需回顧其屬性即可。
PS：請注意，您不能為z-index設置動畫……但是您可以在這里：

 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">