javascript - jQuery 向左滑动动画

Question

我有四个 div 或 td，我想做的是，如果我单击任何一个，那么它们都会向左滑动，剩下的三个应该消失，而我点击的那个应该保留。

我也想要一个简洁的动画效果。

我已经尝试过，但它给出了一些样式错误:

//xControl is a link inside the td
$(xControl).parent().siblings().each(function fn() {
    setTimeout(function fn() {
        $(this).animate({ width: 'toggle' });
    }, 800);
});

我也尝试过:

$(this).hide("slide", { direction: "right" }, 500);

这也不起作用。

我做错了什么？

Answer 1

$(xControl).on("click", function(){
    var thisDiv = $(this);
    var sibs = thisDiv.siblings();
    sibs.animate({'left':'-=150'},{queue:false,complete:function(){
            $(this).animate({'opacity':0});
        }
    });
    thisDiv.animate({'left':'-=150'},{queue:false});
});

这或多或少是我会做的。除了幻灯片和淡入淡出之外，您还可以在其中执行任何您想要的动画。您可以使用 jquery-ui 内置函数，但我个人喜欢 animate 以获得更多可定制的动画。

这是我的 fiddle 来展示它的样子 http://jsfiddle.net/AXkxQ/1/