今回は、ボタンに色々な効果を付けてみます。サンプルコードの実行結果はこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>ボタンにホバーの機能を付けてみる</title> <script src="js/jquery-1.11.3.js"></script> <script src="js/ui/jquery-ui.js"></script> <!-- jquery-ui.jsを読み込まないと animate()の箇所でbackgroundプロパティ 背景色の切り替える処理が動作しない。 --> <style> /* ここから 全称セレクタで空間をリセット フォントの設定を実施 */ *{margin:0;padding:0;} body{background-color:#30bb76;} h1,h2,h3, button{font-family:"メイリオ";} h1{text-align:center;} /* ここまで 全称セレクタで空間をリセット フォントの設定を実施 */ #container{ width:750px; margin:0 auto;} #allButtons button{ float:left; width:200px; height:80px; margin:0 10px 20px; font-size:18px; letter-spacing:0.5em; background-color:#ffffff; color:#ebc000; border-radius:16px; border:none; display:block;} #allButtons button{ border:0px solid #b06289; } button{position:relative;} button .rightButton{ position:absolute; top:0; left:0; width:0; height:100%; overflow:hidden; } button span span{ display:block; width:200px; height:80px; line-height:80px; color:#f0f0f0; background-color:#987789; border-radius:16px; } </style> </head> <body> <div id="container"> <h1>色々なボタン</h1> <div id="allButtons"> <button>東京都</button> <button>神奈川県</button> <button>埼玉県<span class="rightButton"> <span>埼玉県</span></span></button> <button>群馬県</button> <button>茨城県</button> <button>千葉県<span class="rightButton"> <span>千葉県</span></span></button> <button>長野県</button> <button>愛知県</button> <button>静岡県<span class="rightButton"> <span>静岡県</span></span> </button> </div> </div> <script> $(function(){ var DURATION = 500; /* #allButtons button:nth-child(3n+1)と指定すると 「#allButtons」で囲まれている要素、今回は 「３の倍数」+ 1 番目の「button」要素を指定する。 */ //一番左の列のボタン $("#allButtons button:nth-child(3n+1)") .on("mouseover",function(){ $(this) /* stop(true)を入れるのは、実行中のアニメーションを 途中でキャンセルするためです。これを書かないと、 アニメーション途中でボタンの外へマウスを持っていた 場合アニメーションが終わらないと、 mouseoutで指定した アニメーションが実行されない。 stop() 引数：true | false 指定しないと「false」が設定される true: アニメーションをキャンセルする false:アニメーションをキャンセルしない */ .stop(true) .animate({ backgroundColor: "#ae6d44", color: "#ffffff" },DURATION); }) .on("mouseout",function(){ $(this).stop(true).animate({ backgroundColor:"#ffffff", color:"#ebc000" },DURATION); }); //中央列のボタン $("#allButtons button:nth-child(3n+2)") .on("mouseover",function(){ $(this).stop(true).animate({ borderWidth: "14px", color: "#b06289" },DURATION,"easeOutSine"); }) .on("mouseout",function(){ $(this).stop(true).animate({ borderWidth: "0px", color: "#ebc000" },DURATION,"easeOutSine"); }); //一番右の列のボタン $("#allButtons button:nth-child(3n+3)") .on("mouseover",function(){ $(this).find("> span").stop(true).animate({ width:"100%" },DURATION,"easeOutQuad"); }) .on("mouseout",function(){ $(this).find("> span").stop(true).animate({ width:"0%" },DURATION,"easeOutQuad"); }); }); </script> </body> </html> |
サンプルコードでは９つのボタンが表示されていますが、効果は３種類あります。左１列、中央列、右１列で別々の効果がでるようになっています。詳しい説明はサンプルコード上にコメント付しました。