jqueryui show（）メソッドが浮かんでいるdivで正しく動作しないdiv

https://stackoverflow.com/questions/4281305

28-09-2019
|

質問

私は2つ以上の列を形成する子供のdivを備えたdivを持っています。その後、jquery UIブラインド効果を使用してすべての列を一度に表示し、遅延後にフェードアウトできるようにしたいと思います。ただし、これを行うと、列が表示されますが、ブラインド効果では一度に表示されませんが、フェードアウト効果は正常に機能します。子供からフロートスタイルを削除すると、ブラインドエフェクトが機能しますが、それらは左右の列を形成していません。だから私の質問はこれがこんな感じだと思われますか？別の方法は、この作業のために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>

解決

設定する必要があります height の上 #box プラグインが機能するため。これがあなたがプレイできるjsfiddleです：

http://jsfiddle.net/zjw2q/

プラグインのソースをご覧ください。

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

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

また、それに注意してください direction どちらかです vertical また horizontal, 、プラグインドキュメントを参照してください：

http://docs.jquery.com/ui/effects/blind

それ vertical デフォルトであり、上記のタイプミスがあったことです（diection それ以外の direction).

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow