Question

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

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

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

我遇到了$('#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/

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

1 个答案: