jQueryUI子ノードでのアニメーションの表示/非表示

Question

jQueryUIのshow（）/ hide（）関数に問題があります。基本的には、アニメーションの期間中CSSを無効にします。

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ノードがすべて失うことに表示されます。私は次の関数を構築した

http://docs.jquery.com/UI/Effects/Drop、：

jsFiddleリンク：APIによるhttp://jsfiddle.net/UBATE/1/

アニメーションの始めに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のアニメーションは機能しません）いくつかのトリック/バグが発生する可能性はありますが

私は何かを見逃しましたか？回避策はどのように見えますか、すべての子ノードを反復処理する必要がありますか？

ありがとうございます！

ハルティ

Answer 1

jqueryのUIが行わ要素の下に余分なdiv要素を追加します。例：

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

効果が適用され、構造は次のようになります

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

溶液は直接の子セレクタを使用しないで、「>」。例hereを参照してください。バージョンと比較することができます:)