0

このスクロール機能をアニメーション化しようとしています。このスクロール機能では、translate y 値を 100% にして、リンクが画面の外に移動します。私が直面している問題は、上にスクロールするときに、100% を画面外のパーセンテージ (たとえば 11%) にリセットする必要があることです。11% から 24% に移行したいのですが、100% から 24% になってしまいます。「リセット」または2つの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%)"});
4

2 に答える 2

0

2 つの遷移があまりにも早く発生していると思うので、setTimeout 関数で 2 番目の遷移をラップするとうまくいきます。例えば： 

setTimeout(function () { $(".experiment:eq("+i+")").css({"-webkit-transition":""+speed[id]+"s","-webkit-transform":"translate(0px,"+percent+"%)"}); });
于 2013-07-10T20:46:24.810 に答える
0

はい、jqueryを使用してスクロールの位置を取得できます。次に、ここで行うようにcssを変更できます

$(".experiment").css({"-webkit-transition":"0s","-webkit-transform":"translate(0px,11%)"});
于 2013-07-10T05:23:37.553 に答える