如何再次显示切换父元素的元素

Question

我有一个元素列表。此列表的子项是可拖动的。我也有一个div。如果你将鼠标悬停在这个 div 上，我会显示我的<ul>. 如果你拖动一个元素，<ul> 会消失。

这里有一个小演示：http://jsfiddle.net/HuEGa/7/

如您所见，它有效。它看起来不太好，但它确实有效。

如何获得与我已经获得的幻灯片相反的动画？如果我拖动某些东西，我不想只是隐藏容器，而是将它滑开。

我遇到了$('#elementsContainer').animate({width: 'toggle'});，但我不知道如何在容器关闭后显示拖动的元素。

被拖动的元素似乎继承了父元素的 css/states。这就是我在示例中将拖动事件的可见性设置为可见的原因。

有什么想法吗？我需要幻灯片还原或类似的东西。

编辑：（进一步解释）

在示例中，我正在执行$('#elementsContainer').css('visibility', 'hidden');，因此如果您开始拖动<li>，容器将消失。这也会导致孩子消失。为了防止这种情况，我将拖动的项目设置回可见$('.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/