[JS]jQuery初心者もOK、サイトにアニメーション効果を取り入れるチュートリアル

サイト構築 -JavaScript

jQueryを使用して、サイトにフェードやスライド、表示・非表示、タイマーなどのアニメーション効果を取り入れるチュートリアルを紹介します。

Super-Easy Animated Effects with jQuery

チュートリアルは英語ですが、使用する関数、ソース（HTMLとJavaScript）が必要最小限でまとめられており、デモページ（シンプルすぎかも）もあるため、英語が苦手な人でも大丈夫だと思います。

下記に、チュートリアルをいくつかご紹介。

アニメーションでフェードイン・フェードアウト

デモページ

指定したオブジェクトをフェードで表示・非表示、50%の半透明でフェードさせます。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">

$( init );

function init() {
  $('#fadeIn').click( function() { $('#myText').fadeIn(); } );
  $('#fadeOut').click( function() { $('#myText').fadeOut(); } );
  $('#fade50').click( function() { $('#myText').fadeTo( 400, .5 ); } );
}

</script>

</head>
<body>
<blockquote id="myText">
I think he's right, there is something about this, that's... that's so black, it's like, "How much more black could this be?" and the answer is: "None, none... more black."</blockquote>
<ul>
<li><a id="fadeIn" href="#">Fade in</a></li>
<li><a id="fadeOut" href="#">Fade out</a></li>
<li><a id="fade50" href="#">Fade to 50% opacity</a></li>
</ul>

</body>
</html>

アニメーションで表示・非表示

デモページ

オブジェクトを表示・非表示、アニメーションで表示・非表示させます。


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">

$( init );

function init() {
  $('#show').click( function() { $('#myText').show(); } );
  $('#hide').click( function() { $('#myText').hide(); } );
  $('#showSlow').click( function() { $('#myText').show('slow'); } );
  $('#hideSlow').click( function() { $('#myText').hide('slow'); } );
}

</script>

</head>
<body>
<blockquote id="myText">
I think he's right, there is something about this, that's... that's so black, it's like, "How
much more black could this be?" and the answer is: "None, none... more black."</blockquote>
<ul>
<li><a id="show" href="#">Show</a></li>
<li><a id="hide" href="#">Hide</a></li>
<li><a id="showSlow" href="#">Show slowly</a></li>
<li><a id="hideSlow" href="#">Hide slowly</a></li>
</ul>

</body>
</html>

アニメーションでスライドアップ・スライドダウン

デモページ

オブジェクトをアニメーションで上下にスライドさせます。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">

$( init );

function init() {
  $('#slideUp').click( function() { $('#myText').slideUp(); } );
  $('#slideDown').click( function() { $('#myText').slideDown(); } );
  $('#slideToggle').click( function() { $('#myText').slideToggle(); } );
}

</script>
</head>
<body>
<blockquote id="myText">
I think he's right, there is something about this, that's... that's so black, it's like, "How
much more black could this be?" and the answer is: "None, none... more black."</blockquote>
<ul>
<li><a id="slideUp" href="#">Slide up</a></li>
<li><a id="slideDown" href="#">Slide down</a></li>
<li><a id="slideToggle" href="#">Slide up/down</a></li>
</ul>

</body>
</html>

アニメーションで移動

デモページ

オブジェクトをアニメーションで左右に移動させます。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
  #myBlock { background: green; width: 100px; height: 100px; position: relative; }
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">

$( init );

function init() {

  $('#moveRight').click( function() {
    $('#myBlock').animate( {
      left: '500px',
      opacity: .5,
      width: '50px',
      height: '50px'
    } );  } );

  $('#moveLeft').click( function() {
    $('#myBlock').animate( {
      left: 0,
      opacity: 1,
      width: '100px',
      height: '100px'
    } );
  } );

}

</script>

</head>
<body>
<div id="myBlock"> </div>
<ul>
<li><a id="moveRight" href="#">Move right</a></li>
<li><a id="moveLeft" href="#">Move left</a></li>
</ul>

</body>
</html>

アニメーション効果を連続で組み合わせる

デモページ

複数のエフェクトを連続で実行させます。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">

$( init );

function init() {
  $('#fadeOutAndIn').click( function() { $('#myText').fadeOut('fast').fadeIn('slow'); } );
}

</script>

</head>
<body>
<blockquote id="myText">
I think he's right, there is something about this, that's... that's so black, it's like, "How
much more black could this be?" and the answer is: "None, none... more black."</blockquote>
<ul>
<li><a id="fadeOutAndIn" href="#">Fade out and in</a></li>
</ul>

</body>
</html>

サイトでは他にもアニメーションにディレイやストップを加えたチュートリアルがあります。