jQuery animate(color変更時に必要なこと)、if関数の使用でループ

グランド初心者向けお遊び(自分用)
htmlで保存して遊ぼう

```html
<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<title>sample3</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<!-- jQuery.Colorプラグイン これがないと色を変化させるアニメーションが動かない -->
		<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
		<style>
.show{
	position: relative;
	width:300px;
	height:300px;
	background:red;
	display:none;
	overflow: hidden;
	margin: 0;
}
.show2{
	width:300px;
	height:10px;
	background:#000000;
	display:block;
}
.maku{
	position: absolute;
	top: 0;
	width:10px;
	height:300px;
	background-color: #000000;
	margin: 0 0 0 290px;
	z-index: 10;
}
.show3{
	position: absolute;
	top: 0;
	z-index: 9;
	width:600px;
	height:300px;
	display:block;
}
.image-width{
	width:300px;
	height:300px;
}
		</style>
		<script>
//条件分岐で使用する変数を先に記載しておく
var move_count = 0;
$(function(){
	$("button#show").click(function(){
		$(".show:not(:animated)").slideDown("slow");
	});
	$("button#hide").click(function(){
		$(".show:not(:animated)").slideUp(500);
	});
		$("button#toggle").click(function(){
		$(".show:not(:animated)").slideToggle("slow");
	});
		$("button#fadein").click(function(){
		$(".show:not(:animated)").fadeIn("slow");
	});
	$("button#fadeout").click(function(){
		$(".show:not(:animated)").fadeOut("slow");
	});
		$("button#fadetoggle").click(function(){
		$(".show:not(:animated)").fadeToggle("slow");
	});
		$("button#fade100").click(function(){
		$(".show:not(:animated)").fadeTo("slow",1);
	});
		$("button#fade50").click(function(){
		$(".show:not(:animated)").fadeTo("slow",0.5);
	});
		$("button#fade0").click(function(){
		$(".show:not(:animated)").fadeTo("slow",0);
	});
		$("button#move").click(function(){
		//もしmove_countが0だったら(初期値が0なので絶対に動く)
		if(move_count == 0){
		$(".maku:not(:animated)").animate({
		"margin-left":"0",
		"backgroundColor":"#ff97f2"
		},"slow","swing");
		$(".show3:not(:animated)").animate({
		"margin-left":"-300px"
		},"slow","swing");
		$(".show2:not(:animated)").animate({
		"backgroundColor":"#ff97f2"
		},"slow","swing");
		//move_countに1を代入
		move_count = 1;
		//もしmove_countが1だったら(1を代入したので絶対に動く)
		}else if(move_count == 1){
		$(".maku:not(:animated)").animate({
		"margin-left":"290px",
		"backgroundColor":"#000000"
		},"slow","swing");
		$(".show3:not(:animated)").animate({
		"margin-left":"0"
		},"slow","swing");
		$(".show2:not(:animated)").animate({
		"backgroundColor":"#000000"
		},"slow","swing");
		//move_countに0を代入(再び初期値の時と同じ動作をさせるため)
		move_count = 0;
		}else{
		//それ以外の場合、失敗を返す(elseにくることは絶対にないのだが)
		return false;
		}
	});
});
		</script>
	</head>
	<body>
		<button id="show">ダウン</button>
		<button id="hide">アップ</button>
		<button id="toggle">アップダウン</button>
		<button id="fadein">フェードイン</button>
		<button id="fadeout">フェードアウト</button>
		<button id="fadetoggle">イン・アウト</button>
		<button id="fade100">fade100</button>
		<button id="fade50">fade50</button>
		<button id="fade0">fade0</button>
		<button id="move">写真変更</button>
		
		<div class="show">
			<div class="show3">
				<img src="好きな画像を入れよう！" alt="" class="image-width"><img src="好きな画像を入れよう！" alt="" class="image-width">
			</div>
		<div class="maku"></div>
		</div>
		<div class="show2"></div>
		
	</body>
</html>

```