在按钮上滑动下一个div

Question

我正在尝试在按钮单击上滑动div。

我可以通过单击div本身来使它工作。

我尝试将.box更改为button和$(this) to $('.box')，但随后所有的div似乎都在滑动，而不仅仅是下一个div。

我是jquery / javascript的新手，曾尝试搜索一堆不同的解决方案，但我很茫然，我确信这很简单。

$('.box').click(function() {
	$(this).animate({
		left: '-50%'
	}, 500, function() {
		$(this).css('left', '150%');
		$(this).appendTo('#slide-box-container');
	});

	$(this).next().animate({
		left: '50%'
	}, 500);
});

#slide-box-container {
	position: relative;
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 400px;
	overflow: hidden;  
}

.box {
	position: absolute;
	width: 50%;
	height: 300px;
	line-height: 300px;
	font-size: 50px;
	text-align: center;
	border: 2px solid black;
	left: 50%;
	top: 100px;
	margin-left: -25%;
}

#box1 {
	background-color:#333;
	left: 50%;
}

#box2 {
	background-color:#333;
	left: 150%;
}

#box3 {
	background-color:#333;
	left: 150%;
}

#box4 {
	background-color:#333;
	left: 150%;
}

#box5 {
	background-color:#333;
	left: 150%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="slide-box-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>

<button class="clickMe">BUTTON</button>

Answer 1

我为您创建了这个。它将使其与您当前的设置配合使用。

<script>
var boxvar = 1;
$(document).ready(function(){
    $('.clickMe').click(function() {
    $('#box' + boxvar).animate({
        left: '-50%'
    }, 500, function() {
        $('#box' + boxvar).css('left', '150%');
        $('#box' + boxvar).appendTo('#slide-box-container');
        if(boxvar != 5){
        boxvar += 1;
        }else{
        boxvar = 1;
        }
    });

    $('#box' + boxvar).next().animate({
        left: '50%'
    }, 500);
});
});
</script>