jQueryのドロップダウン - CSSはちょっと

Question

を発行し、あなたが行くこととします。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（）を使うべきですか？

Answer 1

代わりの.slideDown()と.slideUp()それぞれ使用しよう：

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

および

$(yourElementHere).stop().animate({ top: "-180px", opacity: "0" }, 500, "swing"); 

Answer 2

はこれを試してみてください。

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

Answer 3

あなたはまだ本当に便利ですslideDown、slideUpを、使用することができます。あなたの問題は.hoverであり、コールバックとして.mouseoverとmouseoutを試してみてください。スライダーが何度も何度もループするので、スライダーが適切に呼び出されないのを防ぐイベントがあるようです。また、私は何が起こっていると思われるのかわからない、あなたはいくつかの要素や何かを混ぜたと思う。あなたは、隠されているか、または示されていると思われるアイテムにクラスを追加し、.hasClass（）を使用することもできます。あなたが特定のクラスを持っているかどうかをチェックしたいときは、それを上下にスライドさせるべきかどうかを判断できます。

Answer 4

まず、個々のアイテムのクラスはありません。 idsを使用して個々にスタイルを設定し、同じクラスのすべてのオブジェクトに対して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(); 
});