javascript - (js) 使用 jquery 或类似工具平滑地 move div x 像素？

Question

我有一张图片，点击时应该将 div 向上 move ~200px，我通过 jquery 设置它来修改 css 而没有问题，但它看起来不像我在其他网站上看到的那样“干净”或平滑。

请原谅，我已经搜索了几个小时，但找不到执行此操作的功能/方法，我认为淡入/淡出可以做到这一点，但我很确定它不能。

谁能花点时间为我指明正确的方向？谢谢。

编辑:写完这篇文章后，我想也许我应该通过 jquery 快速增量更改 css 以模拟低帧率“滑行”..希望有更简单的方法

EDIT2:目前正在使用它，寻找一种“顺利”完成它的方法，如果这甚至有意义的话

$('#Table_Topbar').hide();
var pix = "px";
var fix = $('#Table_Middle1').css('top');
var fix2 = fix.replace('px','');
var fixsub = (fix2 - 200);  
var fixstring = fixsub.toString();
var fixconca = fixstring.concat(pix);
$('#Table_Middle1').css('top',fixconca);

Answer 1

如果你只想使用 Javascript 来做到这一点，你也可以简单地使用一个间隔来每 xx 毫秒更新一次 css，对于 60fps 你会使用 16。(这不是最好的方法)

var i = parseInt($("#Table_Middle1").css("top"));
var animationLoop = setInterval(function() {  i += 10; $("#Table_Middle1").css("top",  i + "px"); }, 16);

一种更简单的方法是使用 jQuery 的动画 api:http://api.jquery.com/animate/ . (这是最跨浏览器友好的方式)

$('#Table_Middle1").animate({top: "-=200px"}, 1000); // take 1 second to move up 200px

您也可以使用 CSS3 transition完成同样的事情，并将您的 JS 简化为一个简单的类切换(这是最“现代”的方式)

jQuery: 
$('#Table_Middle1").addClass("class-to-trigger-animation");

css:
#Table_Middle1 { top: 500px; transition: top 1s ease; } 
#Table_Middle1.class-to-trigger-animation { top: 300px }

如果你想要更复杂的动画，你可以考虑像Greensock 这样的库。 .