Search code examples
jqueryhtmlslideup

.slideUp() doesn't work

Here's what I'm trying to do - I have this structure of my page:

<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>

When the page is loaded - I'm hiding the #page_banner and #voucher_canvas with jQuery:

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

When the user fills in the form and clicks on the #div_send_form, it should draw a voucher on a canvas, with some of the details he entered, then create an image from that canvas. After that I want to slideUp() (hide) the #content div and on completion slideDown() (show) the #page_banner div:

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

For some reason it doesn't do the slideUp(), but after 400ms just hides the #content div and does the slideDown() to #page_banner.

Why is it happening?

I tried to create a jsfiddle, but I guess it doesn't support canvas, so it doesn't exactly work there as well.

Solution

  • Found the problem: The height of the #content div was defined in CSS as follows:

    height:640px !important;

    The !important part was preventing it from sliding up correctly. Once it was removed - everything worked just fine.