jquery ui show（）方法不能正確工作div與浮動子div

Question

我試圖有一個div與形成2列或更多列的子div，然後我希望能夠使所有的列一次出現使用jQuery UI使用盲目效果，然後延遲淡出。但是，當我這樣做時，列確實出現，但不是盲目效果，而是一次出現，但淡出效果卻很好。如果我從子div中移除浮動樣式，則盲視效果會起作用，但它們不會形成並排的列。所以我的問題是這應該是這樣的？另一種方式，我應該在Html中爲這項工作成立專欄？或者我沒有正確使用jquery ui？任何幫助讚賞。

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

Answer 1

您需要在#box上設置height才能使插件生效。這裏是你可以玩的jsfiddle：

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

我不知道：

• http://jsfiddle.net/Zjw2q/

在插件的源看看這可以幫助你，因爲你可能想讓它流動，但是設置足夠大的高度可能會使它像你一樣工作編輯。

另外，還要注意direction或者是vertical或horizontal，請參閱插件文檔：

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

是vertical是默認的，並且你有上面的錯字（diection而不是direction ）。