javascript jQuery 向左滑动动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11000329/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Slide Left Animation
提问by Arshya
I have four div's or td's and what I am trying to do is if I click on any one, then all of them slide left, the remaining three should disappear, and the one I clicked should remain.
我有四个div's 或td's，我想要做的是，如果我点击任何一个，然后所有这些都向左滑动，剩下的三个应该消失，而我点击的那个应该保留。
I also want a neat animation effect.
我也想要一个整洁的动画效果。
I have tried this but it gives some error for style:
我试过这个，但它给出了一些样式错误：
//xControl is a link inside the td
$(xControl).parent().siblings().each(function fn() {
setTimeout(function fn() {
$(this).animate({ width: 'toggle' });
}, 800);
});
I have also tried:
我也试过：
$(this).hide("slide", { direction: "right" }, 500);
This doesn't work either.
这也行不通。
What am I doing wrong?
我究竟做错了什么？
回答by jeschafe
$(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});
});
This is more or less how I would do it. You can do whatever animations you want in there besides a slide and fade. You can use the jquery-ui built in functions, but I like animate personally for the more customizable animations.
这或多或少是我要做的。除了幻灯片和淡入淡出之外，您还可以在其中执行任何您想要的动画。您可以使用内置的 jquery-ui 函数，但我个人更喜欢 animate 以获得更多可定制的动画。
Here's my fiddle to show what it looks like http://jsfiddle.net/AXkxQ/1/
这是我的小提琴来展示它的样子http://jsfiddle.net/AXkxQ/1/
回答by Lowkase
Give this a try, might start you out: http://jsfiddle.net/M8scf/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");
});?
回答by Isaac Gonzalez
You can try with:
您可以尝试：
$(xControl).parent().siblings().each(function fn() {
setTimeout(function fn() {
$(this).animate({ left: '-=500px' });
}, 800);
});
});
you have to make sure you have in your css the possition set as relative xControl{position: relative;}
你必须确保你的 css 中的位置设置为相对xControl{position: relative;}
