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>
<div id="box5" class="box">Div #5</div>
<div id="box6" class="box">Div #6</div>
<div> <button class="Animate">left Animation</button></div>
<div> <button class="Animate2">right Animation</button></div>
</div>
</p>
Javascript 部分:
$('.box').click(function() {
$(this).animate({
left: '-50%'
}, 500, function() {
$(this).css('left', '150%');
$(this).appendTo('#container');
});
$(this).next().animate({
left: '50%'
}, 500);
});
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;
}
#box6 {
background-color: grey;
}
上記のコードがコンパイルされ、「ページ内の div がクリックされる」と、左側に移動します。左のアニメーション ボタンが 1-2-3-4-5-1 の順序でクリックされたときに div が左に移動し、右のアニメーション ボタンが 1-5-4-3-2 の順序でクリックされたときに右に移動するようにします。 -1. 私はすでにこのフォーラムに同様の質問を投稿しましたが、探していたものとは違っていたにもかかわらず、誤って回答を受け入れました. 私の間違いは、私の質問で十分に明確ではありませんでした。ここで大きなコードを求めている場合は申し訳ありません。すべての助けに感謝します。これ はhttp://jsfiddle.net/ykbgT/4151/へのリンクです。