1

過去数時間、回答を求めてグーグルで検索してきましたが、同様のインスタンスがstackoverflowに多数表示されましたが、どの回答もうまくいかなかったようです。

初心者/中級ユーザーとしてJQueryを実際に学習/使用しようとしているので、単純なエラーを犯しただけだと思っています。私が取り組んでいるページが、私が望む効果を得るために約 14 の異なる z-index レベルに依存していることは、おそらく役に立たないでしょう。

ファイル フォルダーに少し似たポートフォリオをデザインしようとしています。理想的には、たとえば「アートワーク」を表す div にカーソルを合わせると、色付きの空白の長方形が div の後ろからスライドします。クリックすると、新しいページが読み込まれ、従来のギャラリーが表示されます。

私は2つの異なる方法を試しましたが、動作する結果と動作しない結果が非常に混在しています。head セクションの script タグは次のようになります。

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
function showHiddenDivHover(thechosenone) {
    $('div[name|="foliosheet"]').each(function(index) {
      if ($(this).attr("id") == thechosenone) {
           $(this).slideDown(600);
      }
      else {
           $(this).slideUp(600);
      }
 });
}
function hideHiddenDivHover(thechosenone) {
    $('div[name|="foliosheet"]').each(function(index) {
    if ($(this).attr("id") == thechosenone) {
           $(this).slideUp(600);
      }
      else {
           $(this).slideDown(600);
      }
 });
}
$("#info").hover(function () {
    $("#info-sheet").slideToggle("slow");
});
$("#artwork").hover(function () {
    $("#artwork-sheet").slideToggle("fast");
});
</script>

1 つ目は、randomsnippets.com の Allen Liu のチュートリアルで見つけた例に基づいています。「a」タグの onMouseOver() と onMouseOut() で動作するように設計しました。スタックの一番上の最初の div ではうまくいきましたが、他の 6 ではうまくいきませんでした。ただし、firebug 拡張機能をオンにすると、残りの div が必要に応じて (ほとんど) 表示されるようになりました。

2 番目の手法は、JQuery ドキュメントで見たものと、stackoverflow に関する同様の質問と JSFiddle の例 ( http://jsfiddle.net/nick_craver/JcBAd/など) に基づいていました。

本文の一部の HTML は次のようになります。

    <div id="artwork"><a href="#" onMouseOver="javascript:showHiddenDivHover('artwork-sheet')" onMouseOut="javascript:showHiddenDivHover()">   
<img src="assets/transparent_long.png" alt="artwork" width="1200" height="35"></a></div>
    <div name="foliosheet" id="artwork-sheet"></div>

<div id="artwork"><div id="artwork-sheet"></div></div>

関連する CSS は次のようになります。

#artwork {
z-index: 170;
position: absolute;
height: 500px;
background-repeat: no-repeat;
overflow: hidden;
top: 400px;
width: 1200px;
margin-left: 30px;
border: 2px solid red;
background-image:url(../assets/file_artwork.png);
}
#websites {
background-repeat: no-repeat;
overflow: hidden;
position: absolute;
z-index: 150;
height: 500px;
top: 360px;
width: 1200px;
margin-left: 30px;
background-image:url(../assets/file_websites.png);
}
#threedmodels {
z-index: 130;
position: absolute;
height: 500px;
background-repeat: no-repeat;
overflow: hidden;
top: 320px;
width: 1200px;
margin-left: 30px;
background-image:url(../assets/file_3dmodels.png);
}
#games {
z-index: 110;
position: absolute;
height: 500px;
background-repeat: no-repeat;
overflow: hidden;
top: 280px;
width: 1200px;
margin-left: 30px;
background-image:url(../assets/file_games.png);
}
#movies {
/* border: 2px solid red; */
z-index: 90;
position: absolute;
height: 500px;
background-repeat: no-repeat;
overflow: hidden;
top: 240px;
width: 1200px;
margin-left: 30px;
background-image:url(../assets/file_movies.png);
}
#flash {
z-index: 70;
position: absolute;
height: 500px;
background-repeat: no-repeat;
overflow: hidden;
top: 200px;
width: 1200px;
margin-left: 30px;
background-image:url(../assets/file_flash.png);
}
#info {
z-index: 50;
position: absolute;
height: 500px;
background-repeat: no-repeat;
overflow: hidden;
top: 160px;
width: 1200px;
margin-left: 30px;
background-image:url(../assets/file_info.png);
}
#artwork-sheet {
width: 1100px;
height: 100px;
margin-left: 100px;
background-color:#ff0000;
display: none;
position: absolute;
bottom: 400px;
z-index: 160;
}
#websites-sheet {
width: 1100px;
height: 100px;
margin-left: 100px;
background-color:#006F00;
display: none;
position: absolute;
bottom: 360px;
z-index: 140;
}
#threedmodels-sheet {
width: 1100px;
height: 100px;
margin-left: 100px;
background-color:#0000F5;
display: none;
position: absolute;
bottom: 320px;
z-index: 120;
}
#games-sheet {
width: 1100px;
height: 100px;
margin-left: 100px;
background-color:#E76000;
display: none;
position: absolute;
bottom: 280px;
z-index: 100;
}
#movies-sheet {
width: 1100px;
height: 100px;
margin-left: 100px;
background-color:#80A2AA;
display: none;
position: absolute;
bottom: 240px;
z-index: 80;
}
#flash-sheet {
width: 1100px;
height: 100px;
margin-left: 100px;
background-color:#AE21B1;
display: none;
position: absolute;
bottom: 200px;
z-index: 60;
}
#info-sheet {
width: 1100px;
height: 100px;
margin-left: 100px;
background-color:#0079D6;
display: none;
position: absolute;
bottom: 160px;
z-index: 40;    
}

複雑な配置であることは承知していますが、静止画像/divは希望どおりに表示されています。私は自分の小さなプロジェクトで深遠になる傾向がありますが、誰かが手を貸してくれることを願っています.

昨年、私はより多くの自家製/変更されたコードをいじりました。興味のある方はhttp://www.authenticrubydesigns.com/portfolioでご覧いただけます。円形のレイアウトと回転を使用しましたが、処理が遅すぎる場合があり、このままのデザインでは限界があります。たまには新鮮な表情で何の問題もありません。

4

2 に答える 2

0

すべてがどのように正確に機能し始めたのか完全にはわかりませんが、基本的な問題は解決しました。微調整の助けが必要ですが、おそらくそのために新しい質問を開始します。

document.ready を追加すると、メリットがあった可能性があります。しかし、実際の機械的な解決策は、CSS の変更と、「スライド」関数を使用した JQueryUI ライブラリへの切り替え/読み込みの組み合わせだったようです。「slideToggle」は機械的にも機能した可能性がありますが、上から下にスライドするだけで、ファイル フォルダーから紙が飛び出す疑似効果が失われます。

私の CSS では、「下」の配置をコメントアウトしました。それは本当に場所を狂わせていたと思います。また、*-sheet ID に z-index レベルを指定しているにもかかわらず、親の呼び出し元から z-index 値を継承していることもわかりました。そのため、HTML を変更して、ドキュメント内の *-sheet div の場所を次の div 内に配置する必要がありました。これにより、呼び出し元の div の後ろに div がグラフィカルに配置されました。

「スライド」API に基づいてまとめた新しい JQuery コードを次に示します。

    $("#artwork").hover(function () {
    $("#artwork-sheet").show("slide", { direction: "down" }, 1000);
    $("#artwork-sheet").hide("slide", { direction: "down" }, 1000);
});
$("#websites").hover(function () {
    $("#websites-sheet").show("slide", { direction: "down" }, 1000);
    $("#websites-sheet").hide("slide", { direction: "down" }, 1000);
});
$("#threedmodels").hover(function () {
    $("#threedmodels-sheet").show("slide", { direction: "down" }, 1000);
    $("#threedmodels-sheet").hide("slide", { direction: "down" }, 1000);
});
$("#games").hover(function () {
    $("#games-sheet").show("slide", { direction: "down" }, 1000);
    $("#games-sheet").hide("slide", { direction: "down" }, 1000);
});
$("#movies").hover(function () {
    $("#movies-sheet").show("slide", { direction: "down" }, 1000);
    $("#movies-sheet").hide("slide", { direction: "down" }, 1000);
});
$("#flash").hover(function () {
    $("#flash-sheet").show("slide", { direction: "down" }, 1000);
    $("#flash-sheet").hide("slide", { direction: "down" }, 1000);
});
$("#info").hover(function () {
    $("#info-sheet").show("slide", { direction: "down" }, 1000);
    $("#info-sheet").hide("slide", { direction: "down" }, 1000);
});

ご協力いただきありがとうございます。それは私を正しい方向に押し進めるのに役立ったと思います。さらに、私はオーストラリアにいるので、真夜中過ぎに書いていました。たぶん、睡眠休憩も少し役に立ちました。:)

-アラン

于 2012-04-22T02:56:58.817 に答える
0

jQuery の animate 関数を使用してみてください。大量の CSS を使用しているため、問題が軽減される可能性があります。また、animate オブジェクト内にパラメーターを追加することで、CSS を操作することもできます。

上にスライドします：

$(this).animate({top: '-=50'},600,function(){
  //callback goes here
});

スライドダウン:

$(this).animate({top: '+=50'},600,function(){
  //callback goes here
});
于 2012-04-21T15:20:32.993 に答える