jquery ui show () Methode nicht korrekt auf div arbeitet mit schwimmendem Kind divs

Question

ich versuche, ein div mit Kind divs zu haben, die zwei oder mehr Spalten bilden, mag ich dann in der Lage sein, alle Spalten auf einmal mit einem jquery ui Blind-Effekt erscheinen zu lassen und dann nach einer Verzögerung ausgeblendet. Jedoch, wenn ich diese die Spalten tun scheinen aber nicht mit blinder Wirkung, die sie gerade auf einmal erscheinen, die Fade-Out-Effekt funktioniert aber in Ordnung. Wenn ich den float-Stil aus dem Kind divs entfernen arbeitet die blinde Wirkung, sondern die sie bilden Seite nicht durch Seitenstützen. Also meine Fragen sind soll das so sein? Ist eine andere Art, wie ich Spalten in Html bilden für diese Arbeit werden sollte? Oder bin ich mit jquery ui nicht korrekt? Jede Hilfe sehr 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 Set height auf #box für das Plugin an die Arbeit. 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 dies hilft Ihnen, wie Sie wahrscheinlich lassen wollen es fließen, aber einige Höheneinstellung, die groß genug ist, kann er funktioniert, wie Sie benötigen.

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

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

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