Question

我有一个图像，当点击时应该移动div~200px，我通过jquery设置修改css而不是isssue但它看起来不像我在其他网站上看到的那样“干净”或光滑。

原谅我，但我一直在寻找几个小时，找不到这样做的功能/方法，我认为fadein / out会这样做，但我很确定它不能。

有没有人花点时间指出我正确的方向？谢谢。

编辑：写完之后我想也许我应该通过jquery快速逐步改变css来模拟低fps'滑行'..希望有一种更简单的方法

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这样的库。

Answer 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/

然而，您需要调整参数，这只是一个简单的例子。

（js）用jquery或类似的方法顺利移动div x像素？

2 个答案: