jquery ui show（）メソッドが浮動小数点divを持つdivで

2つ以上の列を構成するdivを持つdivを作成しようとしていますが、次にすべての列を一度に表示させたいjquery UIのブラインドエフェクトを使用し、遅延後にフェードアウトします。しかし、私はこれを行うと、列は表示されますが、ブラインド効果ではなく、一度にすべて表示されますが、フェードアウト効果はうまく機能します。子divから浮動小数点スタイルを削除すると、ブラインドエフェクトは機能しますが、サイドバイサイドの列は作成されません。だから私の質問は、これがこのようになっているということですか？私はこの仕事のためにHtmlで列を形成するべきですか？または、jquery UIを正しく使用していないのですか？どんな助けもありがたい。次のようにjquery ui show（）メソッドが浮動小数点divを持つdivで

私のhtmlの簡易版は、次のとおりです。

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

出典

2010-11-25 dwperrin