jquery - css3 在转换中再次使用之前立即重置翻译

Question

我正在尝试通过将 translate y 值设置为 100% 来制作此滚动功能的动画，其中链接从屏幕上移出。我面临的问题是，当我向上滚动时，我需要将 100% 重置为离屏幕更高的百分比，例如 11%。我想从 11% 过渡到 24%，但它最终从 100% 直接过渡到 24%。有什么方法可以“重置”或立即更改两个 css 吗？

http://jsfiddle.net/NQeUr/2/

<div id="container">
<div class="experiment" style="-webkit-transform:translate(0px,100%);"> test </div>
</div>

JavaScript:

$(".experiment").css({"-webkit-transition":"0s","-webkit-transform":"translate(0px,11%)"});
$(".experiment").css({"-webkit-transition":"2s","-webkit-transform":"translate(0px,24%)"});

Answer 1

是的，您可以使用 jquery 获取滚动条的位置，然后您可以像这里一样更改 css

$(".experiment").css({"-webkit-transition":"0s","-webkit-transform":"translate(0px,11%)"});