jQueryUIのデモ「オーバーレイとシャドークラス」を再作成する方法

Question

ここで使用されている「オーバーレイとシャドークラス」エフェクトを再作成しようとしています：難しいです。私はそれを1つの要素（その要素をオーバーレイする、その要素の内容を中心にするなど）に適用したいと思います。彼らがそれをするためにいくつかのjQuery関数を使用したことを示唆するものは何も見つかりません。彼らはちょうどCSSのクラスを使用しているようだ。私は彼らのCSSクラスについてすべてを学び、それを使うべきですか？またはそこにクイックjqueryuiソリューションはありますか？

Answer 1

さて、CSSまたはJQueryのいずれかを使用して効果を得ることができます。しかし、実際には、単純なCSSクラスのほんの一部です。それはpositioningの非常に単純な概念を使用します。あなたの要素を保持するコンテナはrelativeの位置にする必要があり、内部の要素はabsoluteの位置になります。要素がコンテナ内にあるabsoluteの場合、内側コンテナのtop: 0pxとleft: 0pxは外側コンテナの左上隅になります。非常に簡単な例はthis fiddleをご覧ください。

ここでJQueryを使用する理由は、計算が必要な場合です。私のフィドルでは、コンテナの幅は静的な値ですが、そのコンテナのサイズが動的に変更される場合は、イベント処理を追加する必要があります。がんばろう。