загадка при анимации
если задаю стили для двигаемого объекта в прямо в HTML файле или через DOM, то двигается нормально и красиво, если для этого объекта есть непустая запись в отдельном CSS файле (пусть даже, не влияющия на позицию, например backgroud) - анимация прерывистая и некрасивая.
Использую простой JS, алгоритм любой, даже x = x+3, дает плохую картину. setTimout(function() { анимация }, 15) без CSS файла делает примерно в 6 раз больше итераций, чем с CSS файлом. Что за чудеса? |
Цитата:
|
Так хорошо:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="st\\\\yle.css" type="text/css">
</head>
<style>
#image {
position:absolute;
background:url("images/1/1.jpg");
width:500px;
height:300px;
}
</style>
<body>
<div id="image"></div>
<script type="text/javascript">
var result = 0;
setTimeout(function() {
result++;
document.getElementById("image").style.left = result + "px";
if (result < 101)
setTimeout(arguments.callee, 20);
}, 0);
</script>
</body>
</html>
а так плохо:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<style>
#image {
position:absolute;
background:url("images/1/1.jpg");
width:500px;
height:300px;
}
</style>
<body>
<div id="image"></div>
<script type="text/javascript">
var result = 0;
setTimeout(function() {
result++;
document.getElementById("image").style.left = result + "px";
if (result < 101)
setTimeout(arguments.callee, 20);
}, 0);
</script>
</body>
</html>
style.css : #image{ display:block; } Мистика! |
c124578, т.е. на всё влияет простое подключение цсс-файла с тем небольшим содержимым? Просто пробовать буду только завтра...
|
именно так и есть, причем содержимое может быть абсолютно любое.
|
Значит завтра будет что посмотреть... :D
|
Ну для начала
document.getElementById("image").style.left = result + "px"; Вынеси из цикла... var image=document.getElementById("image"); //// image.style.left = result; А во вторых в обоих случает разница - 1-2 млс при 100 повторах... В общем нет разницы... Зато document.getElementById("image").style.left = result + "px"; замедляет очень сильно из за вызова 1 функции и 2 свойств каждый раз. Вот откуда и лишние итерации... |
Теоретически:
стиль элемента и в таблице внешней и во внутренней -для чего? 1 по логике вещей-внутренняя переопределяет значение внешней при каждой итерации и затем меняется на динамическое-больше неоткуда браться. 2 скрипт запускается на выполнение до полной загрузки таблицы-отсюда выходит поведение в пункте 1. вариант определить-запускать код по событию onload.как вариант -а браузер сколько потоков загрузки одновременно поддерживает? а вообще при подключении внешней таблицы и запуске по onload в подобной задаче у меня было всё норм |
c124578, а браузер-то, браузер какой?
Тут один товарищ на 15-й хром жаловался... |
ставил id="image" onmouseover="анимация", уже все загрузилось, что можно, то же самое получается.
Кто делал слайдер-меню, галереи, скажите был у вас такой вопрос; если нет - надо полагать, что-то конкретно на моей ЭВМ? браузер FF 3.6 |
Опять же, доберусь до ff 3.6 - попробую. Сейчас не могу...
Гугление по теме результатов не дало? |
Цитата:
|
Цитата:
|
3.6 норм работает с внешней таблицей.
Цитата:
|
ksa, таки нет) Я видел людей, которые отключали автоматическое обновление ff (sic!), и на моё недоумённое "Зачем?!" говорили "А я привык к этой версии, зачем мне обновляться?".
|
Цитата:
|
Только сел за компъютер. Проверил на опере 9.23 и ослах 7-8: действительно все нормально. Значит устал мой файрфокс, сейчас переставлю.
А 3.6 действительно потому, что попробовал №5 , кажется, не понравились изменения в верхней части, специально переставил на 3.6. В общем ложная, получается, тревога, нет загадки с ЦСС, просто уже привык, что файрфокс правильней всех себя ведет, сразу написал сюда. |
Цитата:
c124578, эти изменения, во-первых, экономят экранное место, а во-вторых, при наличии |
при наличии мозгов, не понравилось, в первую очередь, положение кнопки обновить, привык слева, вверху. Аккуратнее.
|
Бли-ин... Правой клавишей мыши по верхней панели, "Настроить". И перетаскивайте эту кнопку куда душе угодно.
Из-за таких как вы, извините, до сих пор приходится писать сотни исправлений для браузера ie6. |
Привет всем!
Вопрос как через var регулировать скорость анимации? var hight=45 var score=450 $('#что-нибудь').animate({'hight':hight},'+score+') так не работает, а как должно,кто знает? |
Цитата:
Виноваты тут разрабы браузера. Имхо, при автоматическом обновлении(а не установке новой версии отдельно), компановка интерфейса сама меняться не должна ни в коем случае. Должно быть соообщение о мегакрутых улучшениях интерфейса и кнопка "попробовать", с возможностью отката. Рядовой юзер не любит перемен. |
Aetae, ну с этим да, согласен. Наверное, я слишком максималистски отношусь к людским недостаткам.
|
Я вообще ненавижу людей, но работать с ними и понимать их это мне не мешает.=\
|
Цитата:
|
| Часовой пояс GMT +3, время: 23:45. |