(js) 使用 jquery 或类似方法平滑移动 div x 像素？答案

【问题标题】：(js) moving div x pixels smoothly with jquery or similar?(js) 使用 jquery 或类似方法平滑移动 div x 像素？
【发布时间】：2015-01-25 12:56:58
【问题描述】：

我有一个图像，当单击时应该将 div 向上移动约 200 像素，我通过 jquery 对其进行设置以毫无问题地修改 css，但它看起来不像我在其他网站上看到的那样“干净”或平滑。

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

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

编辑：写完这篇文章后，我想也许我应该通过 jquery 快速增量更改 css 以模拟低 fps 'glide' .. 希望有更简单的方法

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

【问题讨论】：

标签： javascript jquery move smooth

【解决方案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这样的库。

【讨论】：

【解决方案2】：

您可以在这里使用 js (jQuery) 和 CSS 的组合，例如。

CSS：

.switch {position: absolute; top: 0; left: 0; transition: top 1s}
.switch.active {top: 160px}

jQuery:

$('.switch').click(function(){
    $(this).toggleClass('active');
});

在这里查看小提琴：http://jsfiddle.net/pavkr/Lu7q2c1r/1/

不过，您需要调整参数，这只是一个简单的示例。

【讨论】：