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

Хорошо, я думаю, что оба перехода тоже быстро, поэтому обертывание второго перехода в функции setTimeout работает. Например:

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

Answer 2

да вы можете получить позицию своего свитка с помощью JQuery, а затем вы можете изменить CSS, как вы здесь делаете

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