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+"%)"}); });

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

2 个答案: