javascript - jQuery 向左滑动动画

Question

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

我还想要一个整洁的动画效果。

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

//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 以获得更多可定制的动画。

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

Answer 2

试试这个，可能会让你开始：http: //jsfiddle.net/M8scf/2/

.item
{ 
    width:50px; 
    height:50px;
    margin:0 5px 0 0;
    display:inline-block;
    position:relative;            
    background:lime;
    cursor:pointer;        
}

<div class="con">
    <div class="item">DIV 1</div>
    <div class="item">DIV 2</div>
    <div class="item">DIV 3</div>
    <div class="item">DIV 4</div>
</div>

$(".con .item").click(function() {
  $(this).siblings().hide("slow");    
});​

Answer 3

您可以尝试：

$(xControl).parent().siblings().each(function fn() {
setTimeout(function fn() {
    $(this).animate({ left: '-=500px' });
}, 800);

});

你必须确保你的css中的位置设置为相对xControl{position: relative;}