JavaScript + Ajax 実践サンプル集 - jQueryでボタンをアニメーション化してコンバージョンを上げる！

jQueryでボタンをアニメーション化してコンバージョンを上げる！

説明コード関連書籍コメント投稿

このサンプルは、jQueryの Animate Shadow プラグインを利用してボックスをアニメーション化します。サンプルが表示されたらボタンにマウスを移動してみてください。３番目のボタンをクリックするとバウンスします。 ※このサンプルは、IE以外でご覧ください。IE9 Previewでは、正常に動作するはずです。

このサンプルを編集して試してみる

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Shadow animation jQuery-plugin</title>
  <link href="jQuery/animateShadow/style.css" rel="stylesheet" type="text/css" />
  <link href="jQuery/animateShadow/demo.css" rel="stylesheet" type="text/css" />
</head>
<body>
 
  <div id="body">
       
    <div id="box1">mouve over</div>
    
    <div id="box2">mouse over</div>
    
    <div id="box3">click me</div>
   
  </div>
  
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 
  <script type="text/javascript" src="jQuery/animateShadow/jquery.animate-shadow.js"></script>
  <script type="text/javascript">   
      $('#box1').mouseover(function () {
        $(this).stop().animate({ shadow: '0 0 30px #44f' });
      });
      $('#box1').mouseout(function () {
        $(this).stop().animate({ shadow: '0 0 10px #000' });
      });

$('#box2').mouseover(function () {
        $(this).stop().animate({ shadow: '0 0 50px' }, 'fast');
      });
      $('#box2').mouseout(function () {
        $(this).stop().animate({ shadow: '0 0 0' }, 'fast');
      });

$('#box3').mousedown(function () {
        $(this).stop().animate({ shadow: '3px 3px 3px', top: 3 }, 'fast');
      });
      $('#box3').mouseup(function () {
        $(this).stop().animate({ shadow: '10px 10px 15px', top: 0 }, 'fast');
      });  
  </script>
</body>
</html>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1530本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... »»jQueryテンプレート42選!

jQueryでボタンをアニメーション化してコンバージョンを上げる！

JavaScript + Ajax 実践サンプル集 (1530本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... »»jQueryテンプレート42選!

jQueryでボタンをアニメーション化してコンバージョンを上げる！

JavaScript + Ajax 実践サンプル集 (1530本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... »»jQueryテンプレート42選!