Replace jQuery slide with animate() CSS3

问题

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.

回答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/

回答2:

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'});

回答3:

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);

来源：https://stackoverflow.com/questions/12564735/replace-jquery-slide-with-animate-css3

标签

jquery

css3

slide