JQuery анимация работает плохо во всем. Как я могу сделать это более гладким?

Question

Я пытался эмулировать эффект в слайдере на этом сайте: http://metalabdesign.com/

Вот код анимации:

$('.tagLink').click(function () {
            $('html').css('overflow', 'hidden');
            $('#tagBoxOverlay').show().stop(1).fadeTo(200, .9)
            $('#tagBox').show().stop(1).animate({
                marginTop: '-37.5%',
                marginLeft: '-37.5%',
                height: '75%',
                width: '75%',
                opacity: 1
            }, {
                duration: 200,
                specialEasing: {
                    opacity: 'linear',
                    width: 'linear',
                    height: 'linear',
                    marginLeft: 'linear',
                    marginTop: 'linear'
                },
                complete: function () {
                    $(tagBoxContents).fadeTo(200, 1);
                    $('#tagBoxPopularWrapper').height($('#tagBox').height() - $('#tagBoxDescription').height() - 1);
                    $(window).resize(function () {
                        $('#tagBoxPopularWrapper').height($('#tagBox').height() - $('#tagBoxDescription').height() - 1)
                    });
                }
            });

tagBoxOverflow и tagBox начинаются с 100% ширины и высоты.Наложение исчезает, а поле и исчезает, и сжимается.

Вот сайт, где вы можете увидеть его вживую: http://hashtraffic.com/ Нажмите «Начало», затем нажмите «Хипстеры», и он выполнит анимацию.

Почему это так медленно?Вот ссылка на RAW JS:

http://hashtraffic.com/js/HashTraffic.js

Я так потерян здесь.Я понимаю, я спрашиваю много браузера, но metalabs делает это просто отлично!Было бы проще, если бы я использовал CSS-анимацию с js fallback?

Answer 1

Определенно плавнее использовать переходы css3 (но IE не вознаграждает нас за это).

Но я думаю, что основная проблема - это ваша прибыль.

Я бы сделал это положение: абсолют. и анимация вверху справа внизу и слева.

Что бы вы ни делали, браузер вынужден переформатировать всю страницу, но если вы сделаете позицию абсолютной, изменение размера не повлияет на содержащий элемент или на любого из его родителей.