jQuery suspenso - questões CSS

Question

Ei, se você para ir: imagens http://catonthecouchproductions.com/fish/ e essas sob o menu suspenso são supor para ser escondido em seguida, aparecem em foco, eu tenho este até agora:

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

Mas está se comportando estranho. Todas as sugestões sobre o que posso fazer? Eu acho que uma vez que uma vez sobe os outros slides sobre tomando seu lugar. Devo usar animado () não slideDown?

Answer 1

Em vez de .slideDown() e tentar .slideUp() usar respectivamente:

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

e

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

Answer 2

Você ainda pode usar o slideDown, slideUp, que é realmente útil. Eu acho que o problema é com o .hover, tente com .mouseover e depois mouseOut como o retorno de chamada. Porque agora parece que o evento para parar o cursor não é chamado corretamente uma vez ele faz um loop novamente e novamente. Além disso, eu não pegar o jeito do que é suposto acontecer exaclty, eu acho que você misturou-se alguns elementos ou algo assim. Você pode tentar adicionar uma classe, bem como sobre os itens que você deveria estar oculto ou mostrado e, em seguida, usar o .hasClass (); quando você quer verificar se eles têm uma certa classe ou não, de que maneira você pode determinar se você deve deslizar para cima ou para baixo.

Answer 3

Primeiro, não têm aulas de itens individuais. Você pode individualmente estilo los usando ids, e têm apenas uma função de foco para todos os objetos com a mesma classe (ao contrário de copiar e colar quatro vezes).

Segundo off, aqui é a estrutura básica que você deve ter:

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

Você não precisa ter a ".info" elementos como os filhos dos botões, mas eles precisam ser acessíveis sem uma identificação única (ou seja, o próximo elemento ou a criança).

Isso faz com que o javascript fácil:

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

Ou, você pode modificá-lo gosta de modo a torná-lo funcionar melhor:

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

Answer 4

tente o seguinte:

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