0

以前、いくつかの div を可視化し、紙切れのように上にスライドさせる方法について質問を投稿しましたが、JQuery コードを一貫して (またはまったく) 動作させるのに問題がありました。

私は今、これらの問題を克服し、微調整の段階に入りました。

ファイル フォルダーの仕切りのように見える一連の div があります。個々の div にカーソルを合わせると、個別の div が一枚の紙のようにスライドして表示されます。この効果を実現するために、JQueryUI の「スライド」機能を使用しました。私の最初のバージョンでは、スライドが 1 つしかなく、カーソルを移動した後でも新しい div が表示されたままになっていることがわかりました。次に、「非表示」（最初は「表示」）を使用して「スライド」機能の繰り返しを追加して、シートを再び非表示にしました。これが私のコードです：

    $("#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);
});

初期の動作は正しいです。ただし、カーソルがdivの上にあるか、移動したか（アクティブ化後）にかかわらず、シートは何度もランダムに表示されたり消えたりするようです。

私の推測では、ホバーイベントの後にdivを非表示にするより良い方法があるということです。誰かが助けたり、正しい方向を示したりできますか?

もっと見たい場合の元の質問は次の とおりです。jquery slideUp/Down 関数は、firebug のある firefox でのみ機能します。また、ホバー機能が動作していないようです

ありがとう、

アラン

「コメント」ブロック内には、有用な返信を提供するのに十分なスペースがありません。

(#1 への返信) 申し訳ありませんが、これはうまくいきませんでした。slideDown はまさに私が望んでいないものです.slideDownは上から下に見えるようにしますが、要素が下から上に見えるようにしたいです. また、速記はまったく機能しませんでした。ホバー状態の間は何も変化しませんでした。これは、最初に投稿した質問で述べたのと同じタイプの問題でした。

次に、カンマを使用した「適切な」構文を使用してみましたが、うまくいくようです（この投稿/コメントを完了する前にタイプミスを見つけました）。

短縮バージョンが機能しない理由について何か考えはありますか?

ドキュメントにカット アンド ペーストして、オリジナルをコメント アウトしたところですが、応答はありませんでした。

助けてくれてありがとう、みんな。

4

2 に答える 2

1

まず第一に、それを何度も繰り返し続ける必要はなく、すべてを1つのjQuery選択変数に単純化してから、それに「-sheet」を追加します。次に、同じ関数で表示と非表示を取得します。2つの関数をコンマで区切って、.hover構文を正しく使用します。また、.slideDown（）を使用すると、jQueryがはるかにクリーンになります。:)

$(function(){
    var $hoverbuttons = $('#artwork, #websites, #threedmodels, #games, #movies, #flash, #info')
    $hoverbuttons.hover(function(){
        $(this + '-sheet').slideDown(1000);
    },function(){
        $(this + '-sheet').slideDown(1000);
    });
});
于 2012-04-22T04:10:25.923 に答える
0

ここでホバー構文を参照してくださいhttp://api.jquery.com/hover/2つのアクションの間にコンマ（、）を追加する必要があり、公式ドキュメントに記載されているように関数内に記述することをお勧めします

于 2012-04-22T04:26:15.790 に答える