menu a discesa jQuery - Problemi CSS

Question

Ehi, se vuoi andare: http://catonthecouchproductions.com/fish/ e quelle immagini sotto il menu a discesa si suppone che siano nascosti quindi compaiono al passaggio del mouse, lo ho finora:

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

Ma si sta comportando in modo strano. Qualche suggerimento su cosa posso fare? Penso che da una volta salga le altre diapositive prendendo il suo posto. Dovrei usare animate () non slideDown?

Answer 1

Invece di .slideDown () e .slideUp () prova a usare rispettivamente:

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

e

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

Answer 2

Puoi ancora usare slideDown, slideUp, che è davvero utile. Penso che il tuo problema sia con .hover, prova con .mouseover e poi passa il mouse come callback. Perché ora sembra che l'evento per fermare il dispositivo di scorrimento non venga chiamato correttamente poiché si ripete continuamente. Inoltre, non capisco esattamente cosa dovrebbe succedere, penso che tu abbia confuso alcuni elementi o qualcosa del genere. Puoi provare ad aggiungere una classe anche agli elementi che dovrebbero essere nascosti o mostrati e quindi usare .hasClass (); quando si desidera verificare se hanno una determinata classe o meno, in questo modo è possibile determinare se è necessario scorrere verso l'alto o verso il basso.

Answer 3

Prima di tutto, non ci sono classi per singoli oggetti. Puoi personalizzarli singolarmente utilizzando gli ID e avere una sola funzione al passaggio del mouse per tutti gli oggetti con la stessa classe (invece di copiarli e incollarli quattro volte).

In secondo luogo, ecco la struttura di base che dovresti avere:

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

Non è necessario disporre di " .info " elementi come elementi figlio dei pulsanti, ma devono essere accessibili senza un ID univoco (ovvero l'elemento successivo o l'elemento figlio).

Questo rende facile il javascript:

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

Oppure puoi modificarlo in modo da farlo funzionare meglio:

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

Answer 4

prova questo:

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