0

2つ以上の列を形成する子divを持つ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>

4

1 に答える 1

0

プラグインを機能させるには、heightオンに設定する必要があります。#boxこれがあなたが遊ぶことができるjsfiddleです：

プラグインのソースを見てください：

おそらく流れさせたいので、これがあなたに役立つかどうかはわかりませんが、十分に大きい高さを設定すると、必要に応じて機能する可能性があります。

directionまた、またはのいずれverticalかであることに注意してhorizontalください。プラグインのドキュメントを参照してください。

これverticalはデフォルトであり、上記のタイプミス（diectionの代わりにdirection）があります。

于 2010-11-25T23:16:00.327 に答える