HAM MEDIA MEMO

この記事は jQuery Advent Calendar 2014 の９日目の内容です。

何を書こうか悩んだのですが、軽めに。

jQueryのバージョン1.9より前にあった event の toggle、地味に時折あると、簡易的にイベントを繰り返し実行したいような時に便利だったりします。

.show() と .hide() を繰り返す方の .toggle() ではないことに注意。

このイベントの `.toggle()` だけをプラグイン的に使えるように抜き出してみよと思います。

CSS のTransition 終了時に JavaScript で処理を行う方法

『CSS Nite in SAPPORO Vol.15「先どりWebトレンド2015」に登壇して』で JavaScript との連携を書いたのですが、JavaScriptと合わせて使っていると、 Transition の終了時に合わせて処理を行うようなケースが時折でてきます。

Transition 終了時に JavaScript でイベントを拾えるので、今日はそれを使ったちょっとしたサンプルを紹介。

配列をシャッフルする際は、 Fisher–Yates shuffle というアルゴリズムがあって、それを利用するとかなり速いシャッフルが可能とのことで、毎回利用しているのですが、毎回必要になるたびに調べている一つだったりするので、メモエントリー。

JavaScript の配列からランダムで要素を取り出して扱いたいということがあるのですが、安易にやろうとしたら重複した値がでてきたり、 splice でその要素を除いたりしてやっていたのですが、どうも動作安定していない感じだったので、自分の中で再度見直しとしてのメモエントリー。

ページをスクロールしていると、途中から要素が固定表示される動きをするサイトを時折見ます。ナビゲーションだったりサイドバーの目立たせたいところだったり、用途は様々。

例えば、SaCSS の以前のスペシャルページでも利用していたように、ページ途中で出てくるナビゲーションが、画面の一番上に触れると固定されて以降ずっとついてくるような動きをする。

この実装はそれほど難しくなく、比較的簡単に実装できるのですが、諸所気にかけておいたほうが良い部分があったりする。

シンプルな実装方法を紹介しつつ、注意点も書いておこうと思う。