CODEWITHSUNDEEP
javascriptjqueryanimation
Ian
Ian

Reputation: 653

How can I optimize this function to animate more smoothly

I have written this function to create a "reveal more" functionality for a card style layout. I originally wrote it to all be within a click function but then the scope changed and I needed to move the commands into their own function, and now the animation is very stuttery to more to ignore. I have a feeling that it has to do with the variable updating while animating and causing a conflict but I'm not sure how to bypass that or to set the variable as a constant after taking one height.

        //This function removes the reveal more trigger and slides "new-deals" down to auto height
function revealMore() {
    var containerHt = $("#new-deals").children().height; //set animation height for "reveal more" function

    //Reveal More function which handles animating container height to that of contained elements and removes the reveal more trigger element
    if (($("#new-deals").height) >= containerHt) {
        $("#new-deals").animate({height: containerHt}, 400, function() {
            $("#new-deals").css({height: 'auto'});
        }); 
        $("#new-deals").siblings('.reveal-more').remove();
    }       
}
$(".reveal-more a").click( function() { 
    revealMore(); 
    return false;   
});

Upvotes: 0

Views: 61

Answers (1)

Wyatt
Wyatt

Reputation: 2519

There are a number of things:

  • Save your $("#new-deals") in a variable.
  • Use CSS Animations rather than jquery's animate
  • Use the tranzlateZ(0) hack (if you aren't using a lot of VRAM already).

Check out html5rocks for enlightenment.

Upvotes: 1

Related Questions