3

我在页面上有 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？

如果上次关闭盒子，我会使用 cookie 来关闭盒子。这使我无法使用.height() 复选框的高度，因为在某些情况下它可能已关闭。

4

3 回答 3

4

您可以使用.animate({ "height":"hide" })（反之亦然）来完成此操作。

例子：

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

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

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

于 2012-09-24T12:19:51.400 回答
0

我认为也许这不值得。我不确定一个完整的 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'});
于 2015-09-24T06:45:01.663 回答
-1

我正在尝试替换 jQuery slideDown。

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

这似乎没有动画，而是在单击时完成：

el.transition({ "display": "block", "height": "show"}, 250);
于 2013-06-22T08:44:01.340 回答