HTML+CSS+JavaScript

Есть одна вещь которая меня бесит немного. Приведу пример: есть код который с помощью функции

setTimeout("move()",100)

вызывает функцию move() которая сдвигает на 10рх небольшой рисунок. Почему он идет рывками? Можно это избежать?

Уменьшить величину сдвига например до 1px.

Не помогает. Такое ощущение что JS притормаживает. Особено когда пользователь наводит курсор на кнопку и в этот момент всплывает окно с подсказкой. Мол типа "перейти туда сюда".

Можно попробовать уменьшить интервал со 100 миллисекунд до 40, такую частоту смены кадров человеческий глаз уже перестает различать, по крайней мере так было написано в одной из книг.

Наверное ничего не поделаешь, такова особенность выполнения JS в браузерах.

1. Функцию, которая делает какие-то визуальные эффекты через setTimeout, саму нужно запускать через setTimeout с нулём в качестве значения времени. Т.е. если в самой функции move() есть строка рекурсии со значением 10, 40, 100... миллисекунд, то начальный запуск move() сделайте с нулём. Например, выдвижение менюшки по наведению мыши прописывайте не как onmouseover="move ()", а как onmouseover="setTimeout (move, 0)"

2. При движении именно объекта <IMG>, на мой субъективный взгляд, происходит торможение. Если двигать не <IMG>, а <DIV>, в котором прописан этот самый <IMG>, то процесс протекает плавнее. Попробуйте... хотя, может быть, мой вывод и неверен - визуальные эффекты ведь численно не измерить.

3. Если во время движения браузер будет пытаться делать ещё что-то (показывать title у ссылок или писать что-то в статусную строку), то торможение становится ещё более явным. И от этого, увы, не уйти... если только не попробовать перед началом движения закрыть всю страницу прозрачным ДИВ'ом с "верхним" Z-INDEX, а по окончании движения ДИВ "убрать". Причем опять - setTimeout ("функция показа див'а", 0) и в самой фунции показа див'а вызов функции движения снова через setTimeout с нулём... Поэкспериментируйте.

Плавной анимации можно достигнуть если прибегнуть к анимации по времени (если я не ошибаюсь то она называеться "морфированная анимация"). Суть заключаеться в том, что если Ваш объект должен пройти за 1сек 50px, то за 500 милисекунд он проходит (50*0.5)px. Это используют для анимации в играх. Можно такое сделать и для web-странички, вот только я думаю оное медленно работать будет. У меня страница тормозит когда я масштабирую "отдоляющиеся" текст и <div>.