Question

我在页面上有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替换为.animate({"height":"0px"});，如何在点击.open时将其恢复到之前的高度？

如果最后一次关闭，我会使用cookies来关闭它。这使我无法使用.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 Transit。诀窍在于，在开始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。

AndersHolmström的建议就像一个魅力！可以用“transition（）”（http://ricostacruz.com/jquery.transit）替换动画吗？

这似乎不是动画，而是在点击时完成：

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

用animate（）CSS3替换jQuery幻灯片

3 个答案: