Javascript 反转滑动div'的循环;jquery中的s
HTML部分:Javascript 反转滑动div'的循环;jquery中的s,javascript,jquery,html,Javascript,Jquery,Html,HTML部分: <div id="container"> <div id="box1" class="box">Div #1</div> <div id="box2" class="box">Div #2</div> <div id="box3" class="box">Div #3</div> <div id="box4" class="box">Div #4<
<div id="container">
<div id="box1" class="box">Div #1</div>
<div id="box2" class="box">Div #2</div>
<div id="box3" class="box">Div #3</div>
<div id="box4" class="box">Div #4</div>
<div id="box5" class="box">Div #5</div>
</div>
CSS部分:
body {
padding: 0px;
}
#container {
position: absolute;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
.box {
position: absolute;
width: 50%;
height: 300px;
line-height: 300px;
font-size: 50px;
text-align: center;
border: 2px solid black;
left: 150%;
top: 100px;
margin-left: -25%;
}
#box1 {
background-color: green;
left: 50%;
}
#box2 {
background-color: yellow;
}
#box3 {
background-color: red;
}
#box4 {
background-color: orange;
}
#box5 {
background-color: blue;
}
当遵守上述代码并单击页面中的div时,它们将向左移动。我想让div朝相反的方向向右滑动。我知道这对了解jQuery的人来说可能很容易,但我几乎不了解这个脚本,但我喜欢它的工作方式。链接到此示例:感谢所有帮助
$('.box').click(function() {
$(this).animate({
left: '150%'
}, 500, function() {
$(this).css('left', '-150%');
$(this).appendTo('#container');
});
$(this).next().css({
left: '-150%'
}, 500);
$(this).next().animate({
left: '50%'
}, 500);
});
第1分部
第2分部
第3分部
第4分部
第5分部
$('.box')。单击(函数(){
$(此)。设置动画({
右:“-50%”
},500,函数(){
$(this.css('right','150%');
$(this.appendTo(“#container”);
});
$(this).next().animate({
对:“50%”
}, 500);
});
身体{
填充:0px;
}
#容器{
位置:绝对位置;
边际:0px;
填充:0px;
宽度:100%;
身高:100%;
溢出:隐藏;
}
.盒子{
位置:绝对位置;
宽度:50%;
高度:300px;
线高:300px;
字体大小:50px;
文本对齐:居中;
边框:2件纯黑;
右:150%;
顶部:100px;
右边距:-25%;
}
#框1{
背景颜色:绿色;
右:50%;
}
#框2{
背景颜色:黄色;
}
#框3{
背景色:红色;
}
#方框4{
背景颜色:橙色;
}
#方框5{
背景颜色:蓝色;
}
我也不明白1-5框是如何定位的,因为在他们的css、脚本或html中没有提到他们的位置。谢谢。我从来没有得到过这么快的答案。在你的答案中,div从左到右都是动画,但顺序不应该搞砸。我的意思是在第五季第四季之后。顺序应该与我在链接中提到的示例相同。但方向相反。所需的顺序5-4-3-2-1-5非常感谢。我从来没有这么快得到答案。
$('.box').click(function() {
$(this).animate({
left: '150%'
}, 500, function() {
$(this).css('left', '-150%');
$(this).appendTo('#container');
});
$(this).next().css({
left: '-150%'
}, 500);
$(this).next().animate({
left: '50%'
}, 500);
});
<div id="container">
<div id="box1" class="box">Div #1</div>
<div id="box2" class="box">Div #2</div>
<div id="box3" class="box">Div #3</div>
<div id="box4" class="box">Div #4</div>
<div id="box5" class="box">Div #5</div>
</div>
$('.box').click(function() {
$(this).animate({
right: '-50%'
}, 500, function() {
$(this).css('right', '150%');
$(this).appendTo('#container');
});
$(this).next().animate({
right: '50%'
}, 500);
});
body {
padding: 0px;
}
#container {
position: absolute;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
.box {
position: absolute;
width: 50%;
height: 300px;
line-height: 300px;
font-size: 50px;
text-align: center;
border: 2px solid black;
right: 150%;
top: 100px;
margin-right: -25%;
}
#box1 {
background-color: green;
right: 50%;
}
#box2 {
background-color: yellow;
}
#box3 {
background-color: red;
}
#box4 {
background-color: orange;
}
#box5 {
background-color: blue;
}