jquery ui show() Methode funktioniert nicht korrekt auf Div mit Floating Kind divs

Question

Ich versuche, ein div mit Kind divs, die 2 oder mehr Spalten bilden, möchte ich dann in der Lage sein, alle Spalten auf einmal erscheinen mit einem jquery ui Blind-Effekt und dann nach einer Verzögerung ausblendet. Aber wenn ich das tue, erscheinen die Spalten, aber nicht mit Blind-Effekt, sie erscheinen nur auf einmal, der Ausblendeffekt funktioniert jedoch gut. Wenn ich den Float-Stil von den Child-Divs entferne, funktioniert der Blind-Effekt, aber sie bilden keine Side-by-Side-Spalten. Also meine Fragen sind, soll das so sein? Ist eine andere Art, wie ich Spalten in HTML für diese Arbeit bilden sollte? Oder verwende ich jquery ui nicht richtig? Jede Hilfe wird geschätzt.

Eine vereinfachte Version meiner html ist wie folgt:

<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

Sie müssen height auf #box setzen, damit das Plugin funktioniert. Hier ist die jsfiddle Sie mit spielen können:

• http://jsfiddle.net/Zjw2q/

Werfen Sie einen Blick auf die Quelle des Plugins:

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

Ich weiß nicht, ob Das hilft Ihnen, weil Sie es wahrscheinlich fließen lassen wollen, aber wenn Sie eine Höhe einstellen, die groß genug ist, könnte es so funktionieren wie Sie ed.

Beachten Sie auch, dass direction entweder vertical oder horizontal, die Plugin-Dokumentation sehen:

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

dass vertical ein Standard ist, und dass Sie hatte einen Tippfehler oben (diection statt direction).