Replace jQuery slide with animate() CSS3

Question

I have jQuery slideUp and down and on a page and the performance of animations is very bad. So i want to replace the sliding function with .animate() or .css() to utilize CSS3 animations (which are generally smoother than jQuery)

here is my code

jQuery('.close').on("click", function() {
var parent = jQuery(this).parent('.parentbox');
parent.children('.box').slideUp('500');
jQuery(this).hide();
parent.children('.open').show();
parent.animate({"opacity":"0.4"});
});

jQuery('.open').on("click", function() {
var parent = jQuery(this).parent('.parentbox');
parent.children('.box').slideDown('500');
jQuery(this).hide();
parent.children('.close').show();
parent.animate({"opacity":"1"});
});

Now if i replace .slideUp with .animate({"height":"0px"}); how can i revert it back to the previous height when .open is clicked?

I use cookies to close the box if it was closed the last time. This leaves me unable to use .height() to check box's height as in some cases it might be closed.

Answer 1

You can use .animate({ "height":"hide" }) (and the reverse) to accomplish this.

Example:

function slideUp() {
    $(".slideme").animate({ "height": "hide" });
}

function slideDown() {
    $(".slideme").animate({ "height": "show" });  
}

jsFiddle: http://jsfiddle.net/8VVde/14/