『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。
![ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP](https://cdn-ak-scissors.b.st-hatena.com/image/square/029ddcb27411f5f81384f56fa0c4758eef094936/height=288;version=1;width=512/http%3A%2F%2Fphotoshopvip.net%2Fwp-content%2Fuploads%2F2015%2F08%2Fcss-button-top.jpg)
jQuery の animate の横方向の出現や隠す動作は、width に、show、hide、toggle などを指定することで可能。 指定方法 animate( properties, [duration], [easing], [complete] ) メソッド、もしくは、animate( properties, options ) メソッドの1つ目の引数である properties 内の width: *** に指定する。 toggle toggle を指定。 赤いブロック部分を、クリックすると、グレーのブロック部分が、左方向へ動きながら消える。もう一度、赤いブロック部分を、クリックすると、グレーのブロック部分が、右方向へ動きながら出現。速度( duration )は、slow を指定してある。
文章内のテキストリンクやテキストのみで実装しているようなナビゲーションリンクなどで使えそうなホバーエフェクト・デザインのサンプルです。 文字数が変化したり改行が頻繁に入るような場所などでは正直使い辛くて利用できる場面が限られてしまうものも多いのですが、シンプルなHTMLとCSSで様々な見せ方ができます。 サンプルの中で特にdisplay: inline-block;を記述しているタイプのものが意図しない箇所で改行されたり、逆にされなかったりということがあるので注意して下さい。 実際にどのような動きになってしまうのかはブラウザを縮めて確認してもらったり、または自身で環境を用意して実装・確認をしてもらうとよりわかりやすいと思います。 ここで紹介するエフェクトは、基本的に<a href="#">リンク</a>のようなHTMLに対して実装したものになります。 また、サンプルコードに含まれていません
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く