アニメーションさせる - web-0127のブログ

fadeIn/fadeOut

  jQueryObject.fadeIn();
  jQueryObject.fadeOut();

《index.html》

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery 〜</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<div class="container"><div id="div1">fadeIn example.</div></div>
<div class="container"><div id="div2">fadeOut example.</div></div>
</body>
</html>

《style.css》

body{ font-size:3em; }
.container{ height:120px; }
#div1{ background:pink; display:none; }
#div2{ background:yellow; display:block; }

《script.js》

$(function(){
  $('#div1').fadeIn();
  $('#div2').fadeOut();
});

スピードの指定

  jQueryObject.fadeIn(1000);
  jQueryObject.fadeIn('slow');
  jQueryObject.fadeIn('fast');

数値は「ミリ秒：1/1000秒」
何もしてしない場合、400ミリ秒で動きます

アニメーション終了時にJavaScriptを実行させる

jQueryObject.fadeIn(400, function(){
 alert('フェードイン完了');
});

（）のなかの１番目の要素にはスピードが入ります
カンマで区切り、２番目に「function(){}」を入れます

slideDown/slideUp

  jQueryObject.slideDown();
  jQueryObject.slideUp();

《index.html》

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery 〜</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<div class="container"><div id="div1">slideDown example.</div></div>
<div class="container"><div id="div2">slideUp example.</div></div>
</body>
</html>

《style.css》

body{ font-size:3em; }
.container{ height:120px; }
#div1{ background:pink; display:none; }
#div2{ background:yellow; display:block; }

《script.js》

$(function(){
  $('#div1').slideDown();
  $('#div2').slideUp();
});

スピードの指定

  jQueryObject.slideDown(1000);
  jQueryObject.slideDown('slow');
  jQueryObject.slideDown('fast');

数値は「ミリ秒：1/1000秒」
何もしてしない場合、400ミリ秒で動きます

アニメーション終了時にJavaScriptを実行させる

jQueryObject.slideDown(400, function(){
  alert('スライドダウン完了');
});

（）のなかの１番目の要素にはスピードが入ります
カンマで区切り、２番目に「function(){}」を入れます

animate

jQueryObject.animate({
	プロパティ名：値;
});

《index.html》

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery 〜</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<div id="div1">box</div>
</body>
</html>

《style.css》

#div1{
  background:#8ceb63;
  position:absolute;
  top:0;
  left:0;
  padding:50px;
}

《script.js》

$(function(){
  $('#div1').animate({
    top: 200,
    left: 400
  });
});

スピードの指定

jQueryObject.animate({
  top: 200,
  left: 400
}, 1000);

アニメーション終了時にJavaScriptを実行させる

jQueryObject.animate({
  top: 200,
  left: 400
}, 400, function(){
  alert('アニメーション完了');
});

アニメーションを採用する大きな利点は、ユーザーが画面で何が起こっているのかをすぐに判断できることです。