Слайд следующий div по нажатию кнопки

Question

Я пытаюсь переместить деление на нажатие кнопки.

У меня все работает, нажимая на сам div.

Я пытался изменить .box на button и $(this) to $('.box'), но тогда все дивы, кажется, скользят, а непросто следующий 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>