CODEWITHSUNDEEP
javascriptjqueryanimationcss
alt
alt

Reputation: 13947

jQuery animation perform poorly all over. How can I make it smoother?

I tried to emulate the effect in the slider on this site: http://metalabdesign.com/

Here's the animation code:

$('.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 and tagBox start out 100% width & height. Overlay fades in, and the box both fades in and shrinks.

Here's a site where you can see it live: http://hashtraffic.com/ Hit "begin" then click "hipsters" and it will do the animation.

Why is it so slow? Here's a link to the RAW JS:

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

I'm so lost here. I understand I'm asking a lot of the browser, but metalabs does it just fine! Would it be smoother if I used CSS animations with js fallback?

Upvotes: 0

Views: 475

Answers (1)

Roderick Obrist
Roderick Obrist

Reputation: 3828

Definately smoother to use css3 transitions (but IE does not reward us for this).

But I think a major problem is your margins.

I would make it position: absolute. and animate top right bottom and left.

With what your doing,the browser is forced to reflow the entire page, but if you make the position absolute, resizing does not effect the containing element or any of its parents.

Upvotes: 1

Related Questions