طريقة jQuery UI show () لا تعمل بشكل صحيح على Div مع divs الطفل العائمة

Question

أحاول أن أحصل على div مع divs الطفل الذي يتشكل 2 أو أكثر من العمودين ، ثم أريد أن أكون قادرًا على جعل جميع الأعمدة تظهر مرة واحدة باستخدام تأثير jQuery UI الأعمى ثم أتلاشى بعد التأخير. ومع ذلك ، عندما أفعل ذلك ، تظهر الأعمدة ولكن ليس بتأثير الأعمى ، فإنها تظهر في وقت واحد ، فإن التأثير المتلازم يعمل بشكل جيد. إذا قمت بإزالة النمط العائم من الطفل ، فإن التأثير الأعمى يعمل ، لكنهم لا يتشكلون جنبًا إلى جنب. إذن أسئلتي هل من المفترض أن يكون هذا هكذا؟ هل طريقة أخرى يجب أن أقوم بتكوين أعمدة في HTML لهذا العمل؟ أم أنني لا أستخدم واجهة المستخدم jQuery بشكل صحيح؟ أي مساعدة موضع تقدير.

نسخة مبسطة من 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

تحتاج إلى ضبط 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).