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

サイト構築 -JavaScript

Post on:2010年8月5日

sponsorsr

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

Super-Easy Animated Effects with jQuery

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

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

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

デモページ

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

<textarea name="code" class="html" cols="60" rows="5">
<!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>
</textarea>

<!DOCTYPE html>

<head>

$( 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="fade50" href="#">Fade to 50% opacity</a></li>

</ul>

</body>

</html>

</textarea>

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

デモページ

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

<textarea name="code" class="html" cols="60" rows="5">

<!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>
</textarea>

<!DOCTYPE html>

<head>

$( 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="showSlow" href="#">Show slowly</a></li>

<li><a id="hideSlow" href="#">Hide slowly</a></li>

</ul>

</body>

</html>

</textarea>

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

デモページ

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

<textarea name="code" class="html" cols="60" rows="5">
<!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>
</textarea>

<!DOCTYPE html>

<head>

$( 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>

</textarea>

アニメーションで移動

デモページ

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

<textarea name="code" class="html" cols="60" rows="5">
<!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>
</textarea>

<!DOCTYPE html>

<head>

#myBlock { background: green; width: 100px; height: 100px; position: relative; }

</style>

$( 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>

<ul>

<li><a id="moveRight" href="#">Move right</a></li>

</ul>

</body>

</html>

</textarea>

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

デモページ

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

<textarea name="code" class="html" cols="60" rows="5">
<!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>
</textarea>