setInterval... туда и обратно...
Здравствуйте!
Долго и Это наверное от того, что курить бросил Вместо .animate() пробую использовать setInterval и столкнулся с небольшой проблемой... Скроллю документ посредством setInterval и scrollBy(y,x) при клике по меню навигации. Однако если до того, как setInterval отработал кликнуть по другой кнопке, т.е. запустить ту же функцию, но с несколько другими данными, на экране происходит полнейшая бредятина. Подскажите, пожалуйста, как необходимо доработать скрипт:
function iTryScroll(ID){
var anchor = document.getElementById('anchor-'+ID+'');
var spx = document.body.scrollTop;
var fpx = getOffset(anchor); //тут отдельная функция возвращает позицию элемента относительно начала документа
clearInterval(scroll);//я вроде и сбрасываю setInterval - а все равно какая-то лажа получается
if(spx < fpx){//если мы сейчас выше якоря
var scroll = setInterval(
function(){
if ((spx + 20) <= fpx ){
window.scrollBy(0,20);
spx = spx + 20;
}else if((fpx - spx) != 0){
window.scrollBy(0,(fpx - spx));
spx = spx + (fpx - spx);
}else{
clearInterval(scroll);//останавливаем скроллинг при достижении цели
}
}
,1);
}
if(spx > fpx){// если мы сейчас ниже якоря
var scroll = setInterval(
function(){
if ((spx - 20) >= fpx ){
window.scrollBy(0,-20);
spx = spx - 20;
}else if((spx - fpx) != 0){
window.scrollBy(0,-(spx - fpx));
spx = spx + (fpx - spx);
}else{
clearInterval(scroll);//останавливаем скроллинг при достижении цели
}
}
,1);
}
}
|
|
cyber,
спасибо, но транзишн не подходит, т.к. со скроллом он мне не поможет... а по первой ссылке нет ничего о том, как остановить анимацию и запустить ее с другими параметрами. Разве что в комментариях кто-то рекомендовал использовать clearInterval... но я тоже пробовал - не помогло |
Viral,
суть первой ссылке была показать как в общем ее делать, и после прочтения можно догадаться. Я к тому что используйте функцию animate которая дается в примере http://learn.javascript.ru/js-animation#итого Насчет вашего когда, зачем очищать если таймера еще нет var spx = document.body.scrollTop; var fpx = getOffset(anchor); //тут отдельная функция возвращает позицию элемента относительно начала документа clearInterval(scroll);//я вроде и сбрасываю setInterval - а все равно какая-то лажа получается А теперь представьте у вас есть 2 функции (А и Б) и у каждой есть таймер, мы запустили функцию А и функцию Б , до того как отработал таймер из А, получается что работает таймер из А и Б. А в общем вот более правильное решение
<!DOCTYPE HTML>
<html>
<head> </head>
<body>
<script>
var toElem;
for(var i = 0; i < 1000; i++){
document.write(i+'<br>');
if(i == 700)
document.write('<div id="scroll"> to me</div>');
}
toElem = document.getElementById('scroll');
document.body.addEventListener('click', function () {
var coords = toElem.getBoundingClientRect()
AnimateScroll(coords.top, 100);
});
(function () {
var isAnimate;
window.AnimateScroll = function (y, step) {
var offset = 0;
if(isAnimate)
return;
isAnimate = true;
(function animate() {
if(offset >= y){
offset = y;
isAnimate = false;
}
window.scrollTo(0, offset);
console.log(offset);
offset += step;
if(isAnimate)
setTimeout(animate, 40);
}())
}
}());
</script>
</body>
</html>
а дальше можете расширить, допустим если уже идет анимация, то записывать следующие вызовы в очередь пока не закончиться анимация, очередь - это массив который содержит объект со свойствами x and step (в данном случае) |
cyber,
Исчерпывающе. Благодарю. |
| Часовой пояс GMT +3, время: 17:52. |