用animate（）CSS3替换jQuery幻灯片 [英] Replace jQuery slide with animate() CSS3

问题描述

我在页面上有jQuery slideUp和down，并且动画的性能非常糟糕。
所以我想用.animate（）或.css（）替换滑动函数来利用CSS3动画（通常比jQuery更流畅）

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)

这里是我的代码

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 code> .animate（{height：0px}）; 当 .open 点击了吗？

Now if i replace .slideUp with .animate({"height":"0px"}); how can i revert it back to the previous height when .open is clicked?

如果最后一次关闭，我会使用cookies来关闭它。这使我无法使用 .height（）复选框的高度，因为在某些情况下它可能会被关闭。

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.

推荐答案

您可以使用 .animate（{height：hide}）（反过来）来完成此任务。

You can use .animate({ "height":"hide" }) (and the reverse) to accomplish this.

示例：

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

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

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

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

这篇关于用animate（）CSS3替换jQuery幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！