用 animate() CSS3 替换 jQuery 幻灯片

我在页面上有 jQuery SlideUp 和 Down，动画的性能非常糟糕。 所以我想用 .animate() 或 .css() 替换滑动函数以利用 CSS3 动画（通常比 jQuery 更平滑）

这是我的代码

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

现在如果我更换.slideUp with .animate({"height":"0px"});我怎样才能将其恢复到以前的高度.open被点击了？

如果上次关闭了该框，我会使用 cookie 来关闭该框。这让我无法使用.height()检查框的高度，因为在某些情况下它可能会关闭。

您可以使用.animate({ "height":"hide" })（以及相反）来实现这一点。

Example:

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

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

js小提琴：http://jsfiddle.net/8VVde/14/ http://jsfiddle.net/8VVde/14/