jQuery Dropdown - CSS Fragen

Question

Hey, wenn du gehen: http://catonthecouchproductions.com/fish/ und diese Bilder unter dem Drop-Down sind wohl dann auf schweben zu sein scheinen versteckt, ich habe diese so weit:

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

Aber es verhält sich seltsam. Irgendwelche Vorschläge auf, was ich tun kann? Ich denke einmal, da die anderen Folien steigt über seinen Platz nehmen. Soll ich belebte () nicht slidedown?

Answer 1

Statt .slideDown() und .slideUp() versuchen jeweils zu verwenden:

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

und

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

Answer 2

Sie können immer noch die slidedown, slideUp verwenden, die wirklich nützlich ist. Ich denke, Ihr Problem mit dem .hover ist, versuchen Sie mit .mouseover und dann als Rückruf mouseOut. Denn jetzt ist es das Ereignis scheint den Schieber zu stoppen ist nicht richtig genannt, da es immer wieder Schleifen. Auch ich nicht den Dreh bekommen, was exaclty passieren nehme ist, ich glaube, Sie haben einige Elemente oder etwas gemischt. Sie können versuchen, eine Klasse als auch auf Elemente hinzufügen, die angeblich sind versteckt oder gezeigt werden und dann die .hasClass verwenden (); wenn Sie möchten, zu überprüfen, ob sie eine bestimmte Klasse oder nicht hat, auf diese Weise können Sie bestimmen, ob Sie es nach oben oder unten schieben sollten.

Answer 3

First off, hat keine Klassen für einzelne Elemente. Sie können sie mit ids individuell stylen und haben nur eine Hover-Funktion für alle Objekte mit der gleichen Klasse (im Gegensatz viermal kopieren und einfügen).

Zweiter ab, hier ist die Grundstruktur Sie haben sollten:

<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>
...

Sie brauchen nicht die „.info“ Elemente als Kinder der Tasten haben, aber sie müssen ohne eindeutige ID (dh das nächste Element oder das Kind) zugänglich sein.

Das macht die JavaScript einfach:

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

Oder man könnte es ändern, wie so es besser zu machen arbeiten:

$(".button").hover(function() {
  $(".info").not(".info", $(this)).slideUp(); // Not sure if valid JQ
  $(this).find(".info").slideDown();
});

Answer 4

versuchen Sie dies:

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