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

Question

我正在尝试为这个滚动功能设置动画，其中链接通过将 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%)"});

Answer 2

好的，我认为这两个转换发生得太快了，因此将第二个转换包装在 setTimeout 函数中是可行的。例如：

setTimeout(function () { $(".experiment:eq("+i+")").css({"-webkit-transition":""+speed[id]+"s","-webkit-transform":"translate(0px,"+percent+"%)"}); });