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

Question

我试图让一个 div 包含形成 2 个或更多列的子 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>       

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 或 horizo​​ntal，请参阅插件文档：

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

，vertical 是默认值，并且您有一个上面的拼写错误（diection 而不是 direction）。