Menú desplegable jQuery: problemas de CSS

Question

Oye, si quieres ir: http://catonthecouchproductions.com/fish/ y esas imágenes debajo del menú desplegable se supone que están ocultos y luego aparecen al pasar el mouse, tengo esto hasta ahora:

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

Pero se está comportando raro. ¿Alguna sugerencia sobre lo que puedo hacer? Creo que desde una vez sube las otras diapositivas más tomando su lugar. ¿Debo usar animate () no slideDown?

Answer 1

En lugar de .slideDown () y .slideUp () intente utilizar respectivamente:

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

y

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

Answer 2

Todavía puedes usar el slideDown, slideUp, que es realmente útil. Creo que su problema es con el .hover, intente con .mouseover y luego con el mouseout como la devolución de llamada. Porque ahora parece que el evento para detener el control deslizante no se llama correctamente, ya que se repite una y otra vez. Además, no entiendo lo que se supone que suceda exactamente, creo que has mezclado algunos elementos o algo así. Puedes intentar agregar una clase también a los elementos que se supone que deben estar ocultos o mostrados y luego usar .hasClass (); cuando quiera verificar si tienen una cierta clase o no, de esa manera puede determinar si debe deslizarla hacia arriba o hacia abajo.

Answer 3

Primero que nada, no tengo clases para artículos individuales. Puede personalizarlos individualmente usando ID y tener solo una función de desplazamiento para todos los objetos con la misma clase (en lugar de copiar y pegar cuatro veces).

Segundo, aquí está la estructura básica que debe tener:

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

No necesita tener el " .info " elementos como elementos secundarios de los botones, pero deben ser accesibles sin una identificación única (es decir, el siguiente elemento o el elemento secundario).

Eso hace que el javascript sea fácil:

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

O bien, puede modificarlo para que funcione mejor:

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

Answer 4

prueba esto:

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