jQuery:使い勝手の良いタブ機能の実装メモ - Qiita
.tabs .is_active { /* 何かタブを変更する設定 */ } .tab-content { display: none; } .tab-content.is_show { display: block; } $(function() { var tabMenu = function() { /** * 変数の指定 * $tabs : tabの親要素のjQueryオブジェクト * $content : tabによって切り替わる要素のjQueryオブジェクト * TAB_ACTIVE_CLASS : tabが選択されたスタイルを変更するclass名 * CONTENT_SHOW_CLASS : contentを表示させるためのclass名 * id_arr : $contentのIDを配列に格納 */ var $tabs = $('.tabs'); var $content =
CSSのみでボーダーをスタイリッシュにアニメーションさせる - Qiita
はじめに 何て表現すれば良いかアレですが、こんなエフェクトを見かけたので再現してみました。マウスオーバーで四方のボーダーがシュッと伸びてきます。Coolデスネ :) [動作イメージ] なお実際の動作・ソースは以下で確認ができます http://codepen.io/nekoneko-wanwan/pen/EVjdvX http://nekoneko-wanwan.github.io/demo/mouse-action/hover/border/ 仕組み 実はアニメーションしているのはborderではなく、幅or高さ1pxの擬似要素です。リンク要素とその内側要素に::before, ::afterを設定して、それぞれ四隅に配置し、:hoverでサイズを100%にする動作をtransitionしているだけです。 コード <a href="#" class="button change-bord
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
