2

ねえ、もしあなたが行くなら: http://catonthecouchproductions.com/fish/ドロップダウンの下にあるそれらの画像は非表示になっていて、ホバーすると表示されると思われます.これまでのところ:

$(document).ready(function() {
    $('.btn-fishing-trip').hover(function() {
        $('.fishing-trip').slideDown("slow");
    }, function() {
        $('.fishing-trip').slideUp("slow");
    });
    $('.btn-combo').hover(function() {
        $('.combo').slideDown("slow");
    }, function() {
        $('.combo').slideUp("slow");
    });
});

しかし、それは奇妙な振る舞いをしています。私ができることについて何か提案はありますか？一度他のスライドを上に上げてからだと思います。slideDown ではなく animate() を使用する必要がありますか?

4

4 に答える 4

0

まず、個々のアイテムのクラスはありません。IDを使用して個別にスタイルを設定し、同じクラスのすべてのオブジェクトに対して1つのホバー関数を使用できます（4回のコピーと貼り付けとは対照的です）。

次に、必要な基本構造は次のとおりです。

<div class="button" id="btn1">
  <div class="info"><img src="info1"></img></div>
</div>
<div class="button" id="btn2">
  <div class="info"><img src="info2"></img></div>
</div>
...

ボタンの子として「.info」要素を持つ必要はありませんが、一意のID（つまり、次の要素または子）なしでアクセスできる必要があります。

これにより、JavaScriptが簡単になります。

$(".button").hover(function() {
  $(this).find(".info").slideDown();
}, function() {
  $(this).find(".info").slideUp();
});

または、次のように変更して、より適切に機能させることができます。

$(".button").hover(function() {
  $(".info").not(".info", $(this)).slideUp(); // Not sure if valid JQ
  $(this).find(".info").slideDown();
});
于 2009-03-03T03:44:26.603 に答える
0

代わりに.slideDown()、.slideUp()それぞれ使用してみてください：

$(yourElementHere).stop().animate({ top: "20px", opacity: "1" }, 500, "swing");

と

$(yourElementHere).stop().animate({ top: "-180px", opacity: "0" }, 500, "swing");
于 2009-03-05T11:54:35.067 に答える
0

これを試して：

$(document).ready(function() {
    $('.btn-fishing-trip').hover(function() {
        $('.fishing-trip').slideDown("slow");
        $('.combo').slideUp("slow");
    });    
    $('.btn-combo').hover(function() {
        $('.combo').slideDown("slow");
        $('.fishing-trip').slideUp("slow");
    });
});
于 2009-03-02T14:44:15.230 に答える
0

引き続き、slideDown、slideUp を使用できます。これは非常に便利です。あなたの問題は.hoverにあると思います.mouseoverを試してから、コールバックとしてmouseoutを試してください。スライダーが何度もループするため、スライダーを停止するイベントが適切に呼び出されていないように見えるためです。また、何が起こると思われるのか正確にわかりません。いくつかの要素か何かを混同していると思います。非表示または表示されるはずのアイテムにもクラスを追加してから、 .hasClass(); を使用できます。特定のクラスがあるかどうかを確認したい場合は、上下にスライドする必要があるかどうかを判断できます。

于 2009-03-02T14:44:50.517 に答える