jQuery動畫的左側和底部作品，但不是頂部和右側

爲什麼jQuery animate將框帶到右側，然後到底部，並停在那一點？我想通過一個完整的圓（或正方形）獲得一個盒子，以便盒子能夠返回到原來的位置。jQuery動畫的左側和底部作品，但不是頂部和右側

2012-01-07 Tony

'left'和'top'的位置，而不是命令移動方向。所以你改變左邊的位置，讓物體向左或向右移動，並改變頂部位置，使物體上下移動。你可以使用bottom和right來代替left和top，但是如果你左右混合或者上下混合，你會得到一團糟。在每個方向挑選一個並且只有一個。 – jfriend00 2012-01-07 05:55:31

的元件可以有一個top或bottom位置以及一個left或right。全部四個都沒有意義。使用該做你想要的動畫：

$(".block").animate({left:"150px"}, "slow") 
      .animate({top:"150px"}, "slow") 
      .animate({left:0},"slow") 
      .animate({top:0}, "slow");

這僅使用top和left位置製作動畫。它還利用鏈接，而不是每次調用$(".block")，這會創建一個新的jQuery對象。

來源

2012-01-07 05:48:46 Paulpro

http://jsfiddle.net/Paulpro/QZWDs/49/ – Paulpro 2012-01-07 05:53:35

偉大的反饋 - 清楚發生了什麼事情。感謝您展示我的鏈接！ – Tony 2012-01-07 05:54:59

我只想補充一點，它對於一個元素具有頂部，底部，左側和右側是完全有意義的。這就是你如何在屏幕中間定位div或使div始終填滿整個屏幕的方式。實際上，我個人希望有一個解決方案來爲所有4個動畫製作動畫，這樣您就可以縮小或增大這種定位的div。 – dallin 2016-09-18 05:09:51

嘗試這個

$("#right").ready(function(){ 

    $(".block").animate({left:"150px"},"slow", function() { 
     $(".block").animate({bottom:"150px"},"slow", function() { 
      $(".block").animate({left:"50px"},"slow", function() { 
      $(".block").animate({top:"0px"},"slow"); 

      }); 
     }); 

    }); 
});

來源

2012-01-07 05:51:29 Murtaza

一個不需要使用這樣的完成功能。同一對象上的多個動畫會自動排隊，並會默認順序運行。這不是必需的。 – jfriend00 2012-01-07 05:53:15

這裏有使用回調的任何缺點，它的功能相同。我的意思是說，我的答案沒有錯，但它是什麼使得更少的優化。請解釋一下，因爲我是jQuery的新手，我已經學會了自己的基本知識。 – Murtaza 2012-01-07 05:59:02

你的方法的一些缺點：1）你正在爲每個動畫調用創建一個新的jQuery對象，而不是像在user1的答案中那樣鏈接一個對象。 2）嵌套多個完成函數只是比編寫和理解更復雜的代碼，而不是讓動畫隊列爲您工作 - 簡單的代碼也可以更好地工作。 3）在使用鏈接時，'.stop（）'方法可以控制如何處理其他排隊動畫，並且沒有完成函數嵌套的控制級別。 – jfriend00 2012-01-07 06:05:59

jQuery動畫的左側和底部作品，但不是頂部和右側

回答

相關問題