Замена .animate()

[(Sandr)]

monolithed,
извиняюсь, видимо, я не совсем правильно озвучил проблему..
Так будет вернее: "Как можно раскрыть див, если в стиле не указана его ширина и высота?"

Т.е. если взять ваш первый пример, то в стиле будет не так


div {
background: blue;
position: absolute;
width: 100px;
height: 100px;
}



а так


div {
background: blue;
position: absolute;
}

[monolithed]

Так будет вернее: "Как можно раскрыть див, если в стиле не указана его ширина и высота?"

ну так уберите высоту, она нужна лишь для того чтобы гарантировать максимально возможное ее значение (только в этом случае нужно еще добавлять overflow:hidden;, т.к. тайминг во всех бразурах разный). Что касается ширины, то вы ее тоже можете убрать, если это целесообразно.

[prowoke]

document.getElementById('a').onclick = function() {

        if(++i <= s) {

            elem.style.height = i +'px';

            j = i;

            if(j >= s) return false;

        }

        else {

            elem.style.height = --j +'px';

            if(j <= 0) {

                i = 0;

                return false;

            }

        }

        window.setTimeout(arguments.callee, 1);

        return false;

    };

Сори, конечно, что влезу не в тему, но создавать новый топик с куском кода из этой темы, немного глупо. Так вот вот этот момент:

window.setTimeout(arguments.callee, 1);

Это рекурсия?

[(Sandr)]

monolithed,
я не про это. В вашем примере див раскрывается на 100px, а что если реальная высота дива не 100, 123пикселя? Тогда он раскроется не полностью.

[monolithed]

Это рекурсия?

arguments.callee в данном случае содержит ссылку на анонимный контекст исполнения и в каком-то смылсе, явлеется рекурсивным вызовом.

я не про это. В вашем примере див раскрывается на 100px, а что если реальная высота дива не 100, 123пикселя?

что значит реальая высота? подставте значение какое вам нужно

[(Sandr)]

monolithed,
это высота дива)
Мне не нужно задавать на сколько должен раскрыться див, мне нужно, чтоб он просто раскрывался и всё. Как в jQuery.

[monolithed]

Мне не нужно задавать на сколько должен раскрыться див, мне нужно, чтоб он просто раскрывался и всё. Как в jQuery.

для этого случая предусмотрено несколько вариантов:
1. если блок скрыт, но у него заданы некие значения в css (height+padding-top/bottom) или они заранее известны, то нужно брать их.

2. получить неизвестные значения, можно путем задания абсолютного позиционирования элементу и взятия у него свойста offsetHeight. Если элемент скрыт неполностью или есть какие-то еще причины по которым нельзя задать исходному элементу абсолютное значение, то в этом случае сперва делается клонирование объекта с помощью метода cloneNode().

<style type="text/css">
#wrap {display: none;}
#wrap div {height: 50px;}
</style>

<div id="wrap">
     <div></div>
     <div></div>
</div>

<script type="text/javascript">
var div = document.getElementById('wrap');
// временно меняем css-значения
div.style.cssText = 'display: block; position: fixed; visibility: hidden; overflow: hidden';

//получаем значение высоты
var height = div.offsetHeight;

//восстанавливаем значения
div.style.cssText = 'display: ; position: ; visibility: ; overflow: ';

alert([height, div.offsetHeight]);
</script>

PS: конкретно этот вариант, на кроссбраузерность не проверял.

[float]

сам кстати недавно пробивал по этой теме, тк для меня актуально тоже.
пишу фрэймворк под проект... и анимации фэйдинга уже не хватает.

1-е что я сделал покопался в jquery. там вспомогательные функции работают все через анимэйт, а саму эту функцию, разобрать я не смог. куча ветвлений/непонятные названия переменных...

Траблы которые встретил:
1. это метод вызова. для анимации вроде как больше подходит сетИнтервал, однако есть модная функция requestAnimationFrame, которая по синтаксису походит на seтTimeout, анимация на которой в свою очередь(если браузер старый) происходит с рывками.
также с сетИнтервалом есть фишка, в которой я пока не сильно разобрался (видимых проблем не вызывает).
дело в том, что после очисткиИнтервала, функция вызывается ещё некоторое время...
2. разные типы переменных в стилях, напр: флот если это непрозрачность, инт если там ширина в пикселах и проч.
3. некроссбраузерность некоторых стилей... то есть в фрэймворке это уже решено, но в функцию надо встраивать непонятные ветвления и тп...
4. не важно на сетИнтервале или Таймауте реализована анимация, в разных браузерах она длиться разное время и точка. В ДжейЗапросе это видимо пофикшено, тк. в особо тормозных браузерах анимация почти без перехода... Что мне не особо нравится... Тк для моего проекта время выполнения анимации не особо важно(ну. в разумных приделах), а если ставишь анимацию, то её хочется видеть...

[float]

дело в том, что после очисткиИнтервала, функция вызывается ещё некоторое время...

Хм... Видимо это скорее всего фишка ФФ... И Интервал тут не причём. Сейчас ничего лишнего не вызывается. Как часы.

Или я чёт накосячил, а потом несознательно поправил

[(Sandr)]

monolithed,
о! То, что нужно))