jquery ui show() method not working correctly on div with floating child divs

Question

I trying to have a div with child divs that form 2 or more columns, I then want to be able to make all the columns appear at once using a jquery ui blind effect and then fade out after a delay. However when I do this the columns do appear but not with blind effect they just appear all at once, the fade out effect however works fine. If I remove the float style from the child divs the blind effect works but the they are not forming side by side columns. So my questions are is this supposed to be like this? Is another way I should be forming columns in Html for this work? Or am I not using jquery ui correctly? Any help appreciated.

A simplified version of my html is as follows:

<style type="text/css">
 .displayBox {width:440px; margin:0 auto; display:block;}
 .column { width:200px; }
 .left { float:left; }
 .right { float:right; }
</style>

<script type ="text/javascript">
    $(function () {

        function callback() {
            setTimeout(function () {
                $("#box:visible").removeAttr("style").fadeOut();
            }, 2000);
        };

        // set effect from select menu value
        $("#clickme").click(function () {
            $("#box").show("blind", { diection: "up" }, 1000, callback);
        });
    });                            
</script>

<div>
    <input id="clickme" type="button" value="click" name="click" />
</div>   

<div id="box" class="displayBox">
    <div class="left column"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br /><br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
    </div>
    <div class="right column"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br /><br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
    </div>
</div>       

Answer 1

You need to set height on #box for the plugin to work. Here's the jsfiddle you can play with:

• http://jsfiddle.net/Zjw2q/

Take a look at the source of the plugin:

• http://code.google.com/p/jquery-ui/source/browse/tags/1.8.6/ui/jquery.effects.blind.js

I don't know if this helps you, as you probably want to let it flow, but setting some height that is big enough might make it work as you need.

Also, note that direction is either vertical or horizontal, see the plugin docs:

• http://docs.jquery.com/UI/Effects/Blind

that vertical is a default and that you had a typo above (diection instead of direction).