Тормозит раскрытие блока в chrome
 

Доброго вечера!

Столкнулся с проблемой при написании самодельного разворачиваемого блока на JS. Суть функции банальна - постепенное увеличение высоты div (id = 'legend-bar') с нуля при первом нажатии на кнопку, и соотв-но уменьшение при втором.
Привожу код, который этим управляет:

legendButton.addEventListener("click", function () {

        var height = legendBar.offsetHeight, //здесь запоминаем начальное значение высоты нашего блока
            expand = function () { 

                var i = 0,
                    pxls = 'px';
                /*ниже создаем таймер, который отрабатывает каждые 10 мс для обеспечения плавности
                   На каждом шаге таймера приращиваем высоту на 5 пикселей.*/
                var cntrExpand = setInterval(function () { 
                    document.getElementById('legend-bar').style.height = i + pxls;
                    i += 5;

                    if (i > 100) {
                        console.log("ending expand");
                        clearInterval(cntrExpand);
                    }

                }, 10);


            },
            gripe = function () {

                var i = 0,
                    pxls = 'px';
                //здесь аналогично, только уже происходит уменьшение
                var cntrGripe = setInterval(function () {
                    document.getElementById('legend-bar').style.height = height + pxls;
                    height -= 5;

                    if (height < i) {
                        clearInterval(cntrGripe);
                    }

                }, 10);

            };
        //здесь происходит вызов функции в зав-ти от четного/нечетного значения счетчика (1 по дефолту)
        if (legendCounter % 2 !== 0) {
            expand();
        } else {
            gripe();
        }

        legendCounter++;

    }, false);

Собственно проблема заключается в том, что из 4-х браузеров - Хром, ФФ, опера, ие 9 - ужасно тормозит в хроме при разворачивании/сворачивании, в остальных отрабатывает нормально, почему - не понимаю.

Кто-нибудь может подсказать почему данный код нагружает браузер?
Может быть привести какие-то дополнительные данные?

Потестируй примеры
http://learn.javascript.ru/settimeou...таймера
В своих браузерах...
Одинаково работают?

Ну, визуально - вроде да) Но вот в хроме эти примеры отрабатывают нормально, в отличии от того кода, который я привел.

Тогда делай работающий тестовый пример, посмотрим как он будет работать...

Ну собственно вот - http://learn.javascript.ru/play/P1xOTb

Повырезал все ненужное при этом оставил стили (возможно их высчитывание как-то влияет), для воспроизведения нужно кликнуть на кнопку information. Попробовал еще раз в 4-х браузерах: хром 29, ие 9, опера 11.10 и файрфокс 20 - в хроме тормозит сильно, затем следует опера - в ней уже работает гораздо лучше, но "рывки" анимации все равно ощутимы, затем файрфокс - в нем тормозит при первом открытии, скрытии, затем все ок, ну и лучше всего как ни странно :) - в ие 9, там работает нормально.

Заметил любопытную особенность - если удалить из хтмл-кода таблицу полностью, то слайдер отрабатывает быстро во всех браузерах, но таблица нужна, поэтому прошу подсказать другие варианты решения проблемы)

Мало того! Он притормаживает сильнее при каждом добавлении новой строки в ту таблицу. :)
Т.е. когда строка одна - работает нормально.
А вот потом при каждом добавлении все медленнее и медленнее... :(

Пробовал вот так

window.onload = function () {
    //GLOBAL VARIABLES
    var legendButton = document.getElementById('legend-bar-button'),
        legendBar = document.getElementById('legend-bar'),
        legendCounter = 1;
    legendButton.addEventListener("click", function () {
        if (legendCounter % 2 !== 0) {
            $('#legend-bar').stop().slideDown();
        } else {
            $('#legend-bar').stop().slideUp();
        }
        legendCounter++;
    }, false);
};

Хром так же подводит... :(

grego, похоже ты собрал все эти особенности...
http://learn.javascript.ru/settimeou...тывания