いくつかの写真のレイヤーがあり、異なる z-index # で互いに積み重ねられています。
#layer1 {position: absolute; z-index:-1}
#layer2 {position: absolute; z-index:-2} and so on
対応するメニュー項目があり、クリックするとすべての写真レイヤーが非表示になり、関連する写真レイヤーが表示されます。これを行うには、背景画像の背後にある写真レイヤーのz-indexを設定し(それらを読み込んで表示する準備ができている必要があるため、非表示にすることはできません)、jqueryでクリック時に z-indexを変更し、次にフェードインします。
メニュー項目にカーソルを合わせると、プレビュー サムネイルが表示されますが、クリックしてレイヤーを表示した後、プレビュー サムネイルを表示したくありません。
if/elseステートメントを使用できると仮定しています
これはページの読み込み時に機能しますif ($("#layer1").css("z-index") < "0") {
が、クリックしてz-indexを変更した後でも、if/elseステートメントは古い z-index であると認識します。ここに私が話していることの簡単な js フィドルがあります: http://jsfiddle.net/YktAZ/52/ MENU 2
を
クリックすると、 elseがトリガーされます。
これが混乱しないことを願っています。これが私が実際に取り組んでいるウェブサイトです。COVERS & SPREADS をクリックしてから、表示される新しいメニュー項目にカーソルを合わせるかクリックします: URL