jQuery .not()と:not()の色々な使い方 | Stronghold Archive
どうもこんばんは！ jQueryの中でも結構便利なのが 特定の要素以外を操作できる.notや:notです。 今回はそのマトメとして基本的な使い方~便利な使い方までを記しておきます。 指定した最初の要素以外 $(‘#ex1 ul li:not(:first)’).css({‘opacity’:’0.2′}); $(‘#ex4 ul li’).not(‘:first’).css({‘opacity’:’0.2′}); 兄弟関係にある指定した最初の要素以外 $(‘#ex2 ul li:not(:nth-child(3n-2))’).css({‘opacity’:’0.2′}); [/html] <h4 class="hand3">特定のclassを含んだもの以外</h4> <img src="https://zxcvbnmnbvcxz.com/wp/wp-content/uploads/2012
jQueryでスクロールすると表示する系いろいろ
jQueryでスクロールすると表示する系いろいろ 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 投稿日2012年03月08日 更新日2019年12月19日 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration
jQueryでメニューのアンダーラインがアニメーションするギミックを作る
メニュー下のラインがマウスを追いかけるようにアニメーションするギミックをjQueryで実現する方法の紹介です。紹介するコードは、Snipplrで見つけたコードに少しアレンジを加えています。 メニューとかで、マウスオーバーすると下の線（アンダーライン）が付いてくる↓のような動きになります。 作り方 HTML メニューの部分を以下のように記述します。アニメーションするバーの部分は、<span></span>タグが担当しています。そして、現在のページには、currentのクラスを設定しています。 <div id="nav"> <a href="#">ホーム</a> <a href="#" class="current">お問い合わせ</a> <a href="#">サービス</a> <a href="#">ギャラリー</a> <a href="#">ブログ</a> <span></span> <
Googleも推奨！アニメーションライブラリTweenMaxの使い方 入門編 — un-Tech
ごきげんよう。フーミンです。 「JavaScriptでアニメーション作るならTweenMaxが最強だよ」と先輩から教わり早2年。いまだ現役最強（僕の中で）JavaScriptアニメーションライブラリTweenMaxの良さを広めるために、入門編・応用編の全2回に分けてご紹介しようと思います。 TweenMaxとは TweenMaxとは、GreenSock社が開発した超高性能アニメーションプラットフォーム「GSAP」のひとつで、DOMアニメーションに特化したJavaScriptライブラリです。 requestAnimationFrameを使用しているため、jQueryのanimateメソッドを使うより、動作が高速かつ安定しています。 同じようなライブラリにmokichiくんが紹介してくれたVelocity.jsというのもあります。 TweenMaxと同様に動作が高速かつ安定しており、jQuer
jQueryのanimateの動きを検証 — WEB-PARK.ORG | サイト制作に使用した自作jQueryコードのご紹介
jQueryのanimateを使って、簡単な画像拡大の動きの検証をしてみます。 3つの動作 animateを指定する際に、stop()を指定することで、動きを制御出来ます。 .animateのみ stop()を記述しない場合は命令の実行の回数分、動作します。 例えば、連続してマウスオーバーすると回数分命令が実行されます。 stop().animate stop()を記述すると、命令が実行中に他の行動に移った場合、すぐに動作が止まります。 stop(true , true).animate stop(true , true)を記述すると、命令が実行中に他の行動に移った場合、実行中の命令の途中段階を切り上げ、命令の最後の動作をします。 サンプル サンプルはこちら 一応Javascriptソース $(function(){ var everM = $(".everMove li"); var s
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
