[jQuery] アニメーションしながら開く「続きを読む」をjQueryで実装する
長い文章を3行ぐらいで切っておいて、続きを読むボタンクリックでアニメーションしながら全文表示させてみます。 デモはこちら HTML <div class="grad-wrap"> <span class="grad-trigger">続きを読む</span> <div class="grad-item"> <p>近頃岡田さんへ講義人身少々招待にするあり権力…</p> </div> </div> トリガーとなるボタン.grad-triggerと高さを変化させる.grad-itemをgrad-wrapで囲います。 CSS .grad-wrap { position: relative; } .grad-wrap + .grad-wrap { margin-top: 40px; } .grad-trigger { /*ボタンのスタイルはご自由にどうぞ*/ } .grad-item { posit
![[jQuery] アニメーションしながら開く「続きを読む」をjQueryで実装する](https://cdn-ak-scissors.b.st-hatena.com/image/square/e45aef30f59b2788e85409f3cf151e1c2b520743/height=288;version=1;width=512/https%3A%2F%2Fmetrograph.jp%2Fwp-data%2Fwp-content%2Fuploads%2F2015%2F08%2Ftemplate.jpg)
[JS]フェードで表示・非表示するFAQコンテンツをシンプルなコードで実装するチュートリアル
jQueryを使って、FAQのAnswerをフェードで表示・非表示を切り替えるコンテンツをシンプルなコードで実装するチュートリアルを紹介します。 Questionクリック時 実装 Step 1: 外部ファイル 「jquery.js」を外部ファイルとして記述します。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> Step 2: HTML 質問はh3要素、回答はp要素で実装し、div要素で内包します。 <div id="w"> <h2>User Accounts</h2> <div class="q"> <h3 class="qhead"><a href="#q01">よくある質問</a></h3> <div clas
スマホサイトに入れると使いやすくなる！おすすめjQuery4選！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうも、はやちです_(:3」∠)_ スマホに使うとよりサイトが見やすくなるjQueryをまとめてみました。 アコーディオン アコーディオンみたく開閉式のメニューが実装できるjsです。 記事の多いコンテンツをまとめるのに便利ですね。 ■動きをみる HTML <dl class="acordion"> <dt class="trigger">アコーディオンメニュー<span class="open-close">open</span></dt> <dd class="acordion_tree">テキストテキストテキストテキストテキストテキストテキストテキスト</dd> <dd class="acordion_tree">テキストテキストテキストテキスト テキストテキストテキストテキスト</dd> <dd class="acordion_tree">テキストテキストテキストテキストテキストテキ
jQueryでマウスオーバーした時に要素を全体的に拡大するやつを作ってみる – bl6.jp
すごくどうでもいい内容なんですが、ちょっとやってみたかったので素人ながら作ってみます。ある要素、例えばa要素なんかにマウスオーバーした時にちょっとだけ拡大して強調させたいなどといった時に使えるかもしれません。分かりづらそうなのでサンプルも作ってみました。おかしい部分やもっとこうした方がいいみたいなことがあれば是非教えていただけるとうれしいです。 （※ CSS3だけでもできましたので追加しておきます。） [ads_center] CSSのtransitionを使って背景色もアニメーションで変わるようにしています。要素の拡大はjQueryのanimateを使ってpaddingの値を変えています。で、普通にpaddingの値だけ変えると左上が固定されて右下方向だけアニメーションして拡大していくので、拡大する分positionでマイナスの値も指定します。ちょっと分かりずらいので図にするとこんな感じ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
webamb.com
