jQueryUI показать / скрыть проблему анимации с дочерними узлами - PullRequest
Новая
       14

jQueryUI показать / скрыть проблему анимации с дочерними узлами

1 голос
/ 01 марта 2012

У меня проблемы с функцией show () / hide () jQueryUI. Они в основном деактивируют мой CSS на время анимации.

jsFiddle link: http://jsfiddle.net/UBATE/1/

Согласно API:

http://docs.jquery.com/UI/Effects/Drop,

Я построил следующую функцию: 

updateTeamLists = function(args) {
    // fade out -> rebuild the content -> fade in

    $("#team1, #team2").hide("drop", {"direction": "right"}, 600, function() {
        rebuildTeamLists(args); 
        $(this).show("drop", {"direction": "right"}, 600);  
    });     
};

Дочерние DOM-узлы, по-видимому, теряют все свои атрибуты CSS в начале анимации, то есть они перестают плавать (или теряют отображение в виде встроенных блоков), и их фоновые изображения мгновенно исчезают. Однако анимация и исчезновение текста работают нормально.

Структура HTML DOM: 

<div id="teams">
   <div id="team1">
      <ul>
         <li>Player 1</li>
         <li>Player 2</li>
         <li>Player 3</li>
         <li>Player 4</li>
         <li>0 Pts</li>
      </ul>
   </div>
   <div id="team2">
      <ul>
         <li>Player 5</li>
         <li>Player 6</li>
         <li>Player 7</li>
         <li>Player 8</li>
         <li>0 Pts</li>
      </ul>
   </div>
</div>

CSS: 

#content > #teams {
    margin-top: 10px;
    padding: 5px 5px 5px 22px;
    width: 650px;
    border: 2px solid #bfbfbf;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;

    box-sizing: border-box; 
    -moz-box-sizing:border-box;
}

#content > #teams > div {
    margin-top: 5px;
    display: block;
    height: 28px;
}

#content > #teams > div:first-child {
    opacity: 1.0;   
}

#content > #teams > div:last-child {
    opacity: 0.6;
}

#content > #teams > div > ul > li {
    height: 25px;
    width: 125px;
    border-width: 1px;
    border-style: solid;
    margin-left: 5px;   
    display: inline-block;
}

#content > #teams > div > ul > li:first-child {
    -webkit-border-top-left-radius: 20px;
    -webkit-border-bottom-left-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-bottomleft: 20px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

#content > #teams > div > ul > li:last-child {
    -webkit-border-top-right-radius: 20px;
    -webkit-border-bottom-right-radius: 20px;
    -moz-border-radius-topright: 20px;
    -moz-border-radius-bottomright: 20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;

    width: 50px !important;
}

#content > #teams > #team1 > ul > li {
    background: rgb(229,130,130); /* Old browsers */
    background: -moz-linear-gradient(top, rgb(229,130,130) 0%, rgb(216,43,43) 51%, rgb(232,153,153) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(229,130,130)), color-stop(51%,rgb(216,43,43)), color-stop(100%,rgb(232,153,153))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgb(229,130,130) 0%,rgb(216,43,43) 51%,rgb(232,153,153) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgb(229,130,130) 0%,rgb(216,43,43) 51%,rgb(232,153,153) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgb(229,130,130) 0%,rgb(216,43,43) 51%,rgb(232,153,153) 100%); /* IE10+ */
    background: linear-gradient(top, rgb(229,130,130) 0%,rgb(216,43,43) 51%,rgb(232,153,153) 100%); /* W3C */
    border-color: rgb(229,130,130);

    text-align: center;
    padding-top:3px;
}

#content > #teams > #team2 > ul > li {
    background: #b3dced; /* Old browsers */
    background: -moz-linear-gradient(top, #b3dced 0%, #29b8e5 50%, #bce0ee 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b3dced), color-stop(50%,#29b8e5), color-stop(100%,#bce0ee)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* IE10+ */
    background: linear-gradient(top, #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* W3C */
    border-color: rgb(179,220,237);

    text-align: center;
    padding-top:3px;
}

К сожалению, я не могу разместить код в Интернете для демонстрации, поэтому я опубликовал все, что получил. Я использую Google Chrome 17.0.963.56 и Firefox 10.0.2.

У меня довольно часто возникают проблемы с добавлением эффектов jQueryUI в мои скрипты, в результате чего я их не добавляю. Хотя могут быть некоторые хитрости / ошибки, препятствующие его работе (например, если ваш DOM-узел не имеет атрибута класса, анимация toggleClass не будет работать).

Я что-то пропустил? Как будет выглядеть обходной путь, придется ли мне перебирать все дочерние узлы?

Заранее спасибо!

Harti

1 Ответ

1 голос
/ 01 марта 2012

Пользовательский интерфейс Jquery добавит дополнительный элемент div к введенному элементу. Пример: 

<div id="team1">
<ul>
  ...
<ul>
</div>

Когда эффект применяется, структура будет: 

<div id="team1">
<div class="jquery-ui something-else">
<ul>
  ...
</ul>
</div>
</div>

Решение состоит в том, чтобы не использовать прямой дочерний селектор ">". Смотрите пример здесь . Вы можете сравнить его с вашей версией:)

...