jquery ui show() 方法在带有浮动子 div 的 div 上无法正常工作

Question

我试图让一个带有子 div 的 div 形成 2 列或更多列，然后我希望能够使用 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://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）。