jQuery5

jQuery

アニメーション

初期画面
fadeInボタン、slideDownボタン、右に移動ボタンをそれぞれクリック

fadeInボタンで左側のboxが表示されました。
slideDownボタンは、fadeOutボタンに変わり、水色のboxが表示されました。
右に移動ボタンは、紺色のboxが右に移動しました。

fadeOutボタンをクリックすると、slideDownボタンはに変わりboxが非表示になりました。
右に移動ボタンをクリックすると、紺色のboxが更に右に移動しました。

＜html＞

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Helloを表示</title>
<script src="../jquery-1.9.1.min.js"></script>
<script src="faidein2.js"></script>
<style type="text/css">
	<!--
	div.boxA{
		width: 50px;
		height: 50px;
  		margin: 5px;
  		border: 1px solid black;
  		background-color:#00f0f0;	
		display:none;
	}
	div.boxB{
		width: 50px;
		height: 50px;
  		margin: 5px;
  		border: 1px solid black;
  		background-color:#103050;	
		position:relative;
		top:5px;
		left:20px;
		
	}
	.widths{
		float:left;
		width:75px;
		margin-left:5px;
		height: 60px;
	}
	-->
</style>
</head>
<body>
<!--<div id="box2" class="boxA">2</div>-->
<!--fadeInは、初め非表示にしなければならない。
fadeInを実行したときにstyleに『display: block;』が追加されるので、初期値に
display:none;を使う。　⇒
visibility: hidden（or visible）　⇒要素の領域は確保されるのだが、
このfadeInには使えないようだ。-->
<p>fadeIn</p>
<button id="anime1">fadeIn3秒</button>
<button id="anime2">slideDown2秒</button>
<button id="anime3">右に移動</button>
<div>
	<div class="widths">
		<div id="box1" class="boxA">fadeIn</div>
	</div>
	<div class="widths">
		<div id="box2" class="boxA">slideDown</div>
	</div>
	<div class="widths">
		<div id="box3" class="boxB">move</div>
	</div>
</div>
</body>
</html>

＜JS＞

//var $title =$()
//同じ要素の取得だが、findを使った
//下記のほうが速度が速い。
/*左から右に150px移動。移動距離が長くなると動きが速くなる*/

//$(function(){$('#box1').fadeIn();});
//$(function(){$('#box2').slideDown();});
//$(function(){$('#box3').fadeOut();});
//$(function(){$('#box4').slideUp();});

//3秒かけて表示(fadeIn)
$(function(){
		$("#anime1").click(function(){
		$('#box1').fadeIn(3000)  	//$('#box1').animate({"left": "+=50px"}, "slow");
		});
});
//3秒かけて表示(slideDown)
$(function(){
	 
	var box2 =$("#box2");
	var disp =box2.attr('display');
	 
	$("#anime2").click(function(){
		 if(box2.css('display') =='block'){
		 	box2
		 		//.css('display','none');
		  		.fadeOut(1000);
		 		$("#anime2").html('slideDown2秒');
		 		
		 }else{
		 	$('#box2').slideDown(2000); 
		 	$("#anime2").html('fadeOut1秒');	
		 }
	});
});
/*
//上の書き方との違い
//$(document).ready(function()が正式な書き方だが、
//$(function(){と略して書くことができる。
$(document).ready(function(){
$("#anime2").click(function(){
$("#box2").slideDown(2000);
});
});
*/

$(function(){
	 	$("#anime3").click(function(){
					 //	$('#box3').fadeOut(); 
			$('#box3').animate({"left": "+=50px"}, "slow");
		});
});