替换动画jQuery的幻灯片（）CSS3(Replace jQuery slide with ani

我有jQuery的效果基本show和向下，在页面上和动画的表现非常糟糕。 所以我想，以取代.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与.animate({"height":"0px"}); 我怎样才能将其恢复到以前的高度时.open被点击？

我使用Cookie来关闭对话框，如果它是最后一次关闭。 这让我无法使用.height()以检查框的高度，在某些情况下，它可能会被关闭。

Answer 1:

您可以使用.animate({ "height":"hide" })和反向），以实现这一目标。

例：

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

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

的jsfiddle： http://jsfiddle.net/8VVde/14/

Answer 2:

我想，也许它只是不值得。 我不知道一个完整的CSS3更换会比这个烂摊子更加简洁。 这是假设你使用jQuery的交通 。 诀窍在于，你需要呈现高度启动CSS3过渡之前，这是不平凡的获得。

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

Answer 3:

我试图取代的jQuery了slideDown。

由Anders霍姆斯特姆的建议就像一个魅力！ 可以用动画的“转移（）”所取代（ http://ricostacruz.com/jquery.transit ）有关系吗？

这似乎不是动画，但点击时代替完成：

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

文章来源: Replace jQuery slide with animate() CSS3