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.

Anders Arpi · Accepted Answer · 2012-09-24T12:38:18.503

4

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/

edited Sep 24 '12 at 12:38

answered Sep 24 '12 at 12:19

Anders Arpi

8,277
3
33
49

In my question i said "This leaves me unable to use .height() to check box's height as in some cases it might be closed." Your solution won't work if the box is already close (i.e has 0px height) – MayThrow Sep 24 '12 at 12:33
Indeed - but you can still have a variable with the element's height, can you not? Is the height of the element dynamically changing depending on it's content? And how do you hide/close the box at start if the cookie tells you do - can't you save the height then? – Anders Arpi Sep 24 '12 at 12:36
I found another way to do it. Does this work well for you in regards to performance? – Anders Arpi Sep 24 '12 at 12:38
The height of boxes is dynamic. So no, i can not save the height in a variable. About your edit, it works. But i need a CSS3 replacement.....to my knowledge, your implementation does not utilize CSS3 so it's basically the same as slideUp or slideDown But +1 for your effort – MayThrow Sep 24 '12 at 12:40
So... you need to know the height of a box, potentially before it has any height, and it can have any height when it's displayed? Hmm. :) It really depends on how you go about hiding the box at startup if the cookie tells you to. – Anders Arpi Sep 24 '12 at 12:46

score 0 · Answer 2 · answered Sep 24 '15 at 06:45

I think that perhaps it just isn't worth it. I'm not sure a full CSS3 replacement will get much more succinct than this mess. And this is assuming you're using jQuery Transit. The trick is that you need the rendered height before you start the CSS3 transition, and that isn't trivial to get.

var $new = $(content)
    .css({'visibility': 'hidden', 'position': 'absolute', 'overflow': 'hidden'})
    .appendTo($append);
var height = $new.height();
$new.css({'height': 0})
    .css({'position': 'static', 'visibility': 'visible'})
    .transition({'height': height + 'px'});

plbr · Answer 3 · 2013-06-22T11:16:18.707

-1

I am trying to replace jQuery slideDown.

The suggestion by Anders Holmström works like a charm! Can animate be replaced by "transition()" (http://ricostacruz.com/jquery.transit) though?

This does not seem to animate, but is instead finished when clicked:

el.transition({ "display": "block", "height": "show"}, 250);

edited Jun 22 '13 at 11:16

answered Jun 22 '13 at 08:44

plbr

75
1
9

Hello and welcome to StackOverlow. Remember that the order of the posts here is not chronological, but based on popularity and accepted answer. Don't refer to content of other posts using "above" etc, but use the posters name or leave as comment. – Tormod Jun 22 '13 at 09:06
1

Yes I came upon this post seeking the same answer you seek. And welcome to stackoverflow! Remember if you are not posting an ANSWER but requesting further informations, use comments but not the answer box. – Xavier_Ex Dec 18 '13 at 16:16
In fact, using transition on `"height": "show"` does not do anything as "show" is not a valid css value for "height". The fact that you see the "animation" being finished is because it sets the display to block. – Xavier_Ex Dec 18 '13 at 16:18

Replace jQuery slide with animate() CSS3

3 Answers3

Linked