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工作。