親がトグルされた要素を再び表示する方法

Question

私は要素のリストを持っています。このリストの子はドラッグ可能です。また、私はdivを持っています。このdivにカーソルを合わせると、<ul>.が表示されます。要素をドラッグすると、<ul>が表示されなくなります。相続人

少しデモ：http://jsfiddle.net/HuEGa/7/

ご覧のとおり、それは動作します。それはうまく見えませんが、うまくいきます。

私はすでに取得したスライドとは逆のアニメーションをどうやって取得できますか？私が何かをドラッグするならば、私はコンテナを隠すだけではなく、それをスライドさせたくありません。

私は$('#elementsContainer').animate({width: 'toggle'});に出くわしましたが、コンテナが閉じられた後にドラッグされた要素をどのように表示するかわかりません。

ドラッグされた要素は、親からCSS /状態を継承しているようです。そのため、私の例ではドラッグイベントで可視性を可視に設定しています。

私はスライドの復帰などが必要です。

編集：（さらなる説明）

例では、コンテナが消え<li>のドラッグを開始すると、私はそう$('#elementsContainer').css('visibility', 'hidden');をやっています。これにより子供は消滅する。これを防ぐために、ドラッグしたアイテムを再び表示に設定します。$('.ui-draggable-dragging').css('visibility', 'visible');

コンテナを表示しないように設定すると醜いので、アニメーションを追加したいと思います。それを試して、アニメーションロジックで置き換えることができます。次に、コンテナが非表示になると、ドラッグされた項目も非表示になります。さて、もう一度見えるようにする必要があります。ここで問題が発生します。私は素敵な隠しアニメーションを実装することはできませんし、私は例でそれをやっているように、ドラッグされたアイテムを再び見ることができます。

Answer 1

あなたは何か

$(document).ready(function(e) { 
$(".draggable li").draggable({ 
    //connectToSortable: ".sortable", 
    helper: 'clone', 
    revert: 'invalid', 
    appendTo: 'body', 
    start: function() { 
     $('#elementsContainer').hide('slide', { 
      direction: "left" 
     }, 500); 
    } 
}); 

のようなフィドル http://jsfiddle.net/HuEGa/8/