.slideUp() 不起作用

Question

这就是我想要做的——我的页面结构是这样的：

<div id="wrapper">
    <div id="page_banner">
        <canvas id="voucher_canvas"></canvas>
        <div id="div_voucher_img"><img id="voucher_img" src="" /></div>
    </div>

   <div id="content">
        inner divs with contact form...
        <div id="div_send_form"></div>
   </div>
</div>

页面加载后 - 我用 jQuery 隐藏了 #page_banner 和 #voucher_canvas：

$("#page_banner, #canvas_voucher, #div_print_voucher").hide();

当用户填写表单并单击#div_send_form 时，它应该在画布上绘制一张凭证，其中包含他输入的一些详细信息，然后从该画布创建一个图像。之后我想slideUp()（隐藏）#content div 并在完成时slideDown()（显示）#page_banner div：

$("#content").slideUp(400, function () {
    $("#page_banner, #div_print_voucher").slideDown(1000);
});

由于某种原因，它不执行 slideUp()，但在 400 毫秒后只是隐藏了 #content div 并执行 slideDown() 到 #page_banner。

为什么会这样？

我尝试创建一个jsfiddle，但我猜它不支持画布，所以它也不能在那里工作。

Answer 1

发现问题： #content div 的高度在 CSS 中定义如下：

height:640px !important;

!important 部分阻止它正确向上滑动。删除后 - 一切正常。