jQuery的動畫 - 移動的座標箱

Question

我有一個<div>與position: absolute：

<div style="top:200px; left:400px;"> 

，我希望它很好地慢慢移動到新的座標，例如：

<div style="top:100px; left:500px;"> 

哪些jQuery的動畫效果可以做到這一點？還是有其他解決方案？

預先感謝您

Answer 1

您可以嘗試使用您已設置初始位置後絕對動畫功能。另一方面，您可以複製div並移除原始文件，然後使用jQuery中的動畫函數將其移動到新座標。

jQuery(".container").click(function() { 

var position1 = jQuery("#position1").position(); 
alert(position1.top + ', ' + position1.left); 

var position2 = jQuery(this).position(); 
alert(position2.top + ', ' + position2.left); 

}); 

然後

$('.container').click(function(){ 
    var position1 = $('#position1').position(); 

    $(this).animate({ 'top': position1.top + 'px', 'left': position1.left + 'px'}, 150, function(){ 

    }); 
}); 

Answer 2

你不應該使用jQuery的動畫這一點。使用CSS更容易，而且看起來更順暢。

您創建具有以下屬性的類：

.animate{ 
    transform: translate(50px, 100px); 
    transition: 1s ease-in-out; 
} 

在translate()的第一個值是像素移動到右邊的量，第二是像素的下移量。

所以，如果我們用你給我們的例子中，它應該是：

.animate{ 
    transform: translate(100px, -100px); 
    transition: 1s ease-in-out; 
} 

的1s上transition是秒的總金額動畫會抓住。你可以在這裏使用小數。

ease-in-out是動畫製作動畫的方式。你可以找到一個完整的列表here。

當您想要動畫開始時，只需將該類添加到div即可。下面的代碼將類添加到div當你點擊它：

$("div").click(function() { 
    $("div").addClass("animate"); 
}); 

您確實需要更改的選擇，現在它會做它會在你的頁面的每個div工作。