JQuery UI метод show () не работает правильно на div с плавающими дочерними div - PullRequest
Новая
       13

JQuery UI метод show () не работает правильно на div с плавающими дочерними div

0 голосов
/ 26 ноября 2010

Я пытаюсь создать элемент div с дочерними элементами div, которые образуют 2 или более столбцов. Затем я хочу, чтобы все столбцы отображались одновременно с использованием эффекта jquery ui вслепую, а затем исчезали после задержки. Однако, когда я делаю это, столбцы появляются, но не со слепым эффектом, они просто появляются все сразу, эффект затухания, однако, работает отлично. Если я удаляю стиль float из дочерних элементов 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>

1 Ответ

0 голосов
/ 26 ноября 2010

Вам нужно установить height на #box, чтобы плагин работал. Вот jsfiddle, с которым вы можете играть:

Посмотрите на источник плагина:

Я не знаю, поможет ли это вам, поскольку вы, вероятно, хотите, чтобы оно текло, но установка достаточно большой высоты может заставить его работать так, как вам нужно.

Также обратите внимание, что direction это либо vertical, либо horizontal, см. Плагин документации:

, что vertical является значением по умолчанию, и что вы имели опечатку выше (diection вместо direction).

...