animate( )メソッドを使ったアニメーション

animate( )メソッド

$( セレクタ )に対してアニメーションを設定します

$( セレクタ ) .animate( { プロパティ: 値, プロパティ: 値 }, ディレイ, イージング, コールバック );

property	CSSプロパティ名（値を数値で指定できるものに限る）
value	アニメーション終了後の値
duration	アニメーションが完了するまでの時間（単位はナノ秒）
easing	イージングの設定、デフォルトでは「linear」と「swing」のどちらか
callback	アニメーション終了後に実行する関数

stop( )メソッド

animate( )メソッドによるアニメーションは連続して再生されますが、stop( )メソッドを組み合わせることで重複した再生を防ぐ
下記の例の場合、ボタンの文字の大きさを変えるだけなので影響がなさそうですが、stop( )メソッドがない場合繰り返し操作した回数分のアニメーションが再生されます

hover( )メソッド

$( セレクタ )にマウスカーソルが重なったときの処理を設定します

$( セレクタ ) .hover( マウスオーバー時に実行する関数, マウスアウト時に実行する関数 );

《サンプルの記述》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>animate( )メソッドを利用したボタン</title>
<style>
html, body, p {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
a { text-decoration: none; }

#wrapper {
  width: 960px;
  margin: 50px auto;
  text-align: center;
}
.fadeBtn {
  width: 200px;
  height: 70px;
  color: #000;
  font-size: 18px;
  font-weight: bold;
  line-height: 70px;
  text-align: center;
  display: inline-block;
  overflow: hidden;
  background: #ddd;
  border: #fff 2px solid;
  border-radius: 5px;
  box-shadow: 0 0 3px #555;
}
</style>
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(function(){
  
  $('.fadeBtn').hover( function() {
    $(this).stop().animate( { opacity: '0.5', fontSize: '22px' }, 300 ); 
  }, function() {
    $(this).stop().animate( { opacity: '1.0', fontSize: '18px' }, 300 );
  });
  
});
</script>
</head>
<body>
<div id="wrapper">
<p><a href="#" class="fadeBtn">BUTTON</a></p>
</div><!-- /#wrapper -->
</body>
</html>

onハンドラに書き換えた場合

ボタンにアニメーションをつけるだけなら「hover( )」を使ったほうが記述を簡略化できます

$(function(){
  
  $('.fadeBtn').on( { 'mouseenter': function() {
    $(this).stop().animate( { opcity: '0.5', fontSize: '22px' }, 300 ); 
  },  'mouseleave': function() {
    $(this).stop().animate( { opcity: '1.0', fontSize: '18px' }, 300 );
  }
  });
  
});

クラスの追加・削除によるアニメーション

指定したHTML要素に対してclass属性を追加する「addClass()メソッド」
指定したHTML要素に対してclass属性を削除する「removeClass()メソッド」

addClass()メソッド

$( セレクタ )の要素に指定したCSSのclass属性を追加します
複数のクラスを追加する場合は、スペースで区切って指定します

$( セレクタ ) .addClass( クラス名 );

removeClass()メソッド

$( セレクタ )の要素に指定したCSSのclass属性を削除します
複数のクラスを削除する場合は、スペースで区切って指定します

$( セレクタ ) .removeClass( クラス名 );

《サンプルの記述》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>animate( )メソッドを利用したボタン</title>
<style>
html, body, p {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
a { text-decoration: none; }

#wrapper {
  width: 960px;
  margin: 50px auto;
  text-align: center;
}
.cssAnim {
  padding: 15px 0;
  width: 150px;
  color: #000;
  font-weight: bold;
  text-align: center;
  display: inline-block;
  overflow: hidden;
  background-color: #cfcfcf;
  border: #999 1px solid;
  transition: all 0.3s linear;
}
.bgColor {
  color: #fff;
  background-color: #000;
}
</style>
<script src="js/jquery-2.2.1.min.js"></script>
<script>
$(function(){
  
  $('.cssAnim').hover( function() {
    $(this).addClass( 'bgColor' ); 
  }, function() {
    $(this).removeClass( 'bgColor' );
  });
  
});
</script>
</head>
<body>
<div id="wrapper">
<p><a href="#" class="cssAnim">BUTTON</a></p>
</div><!-- /#wrapper -->
</body>
</html>