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内置函数，但我喜欢为个性化动画制作更多可自定义的动画。

这是我的小提示，展示它的样子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;}

jQuery向左滑动动画

3 个答案: