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部分阻止它正确向上滑动。一旦它被删除 - 一切正常。

.slideUp（）不起作用

1 个答案: