jQuery dropdown - Problèmes de CSS

Question

Hé, si vous voulez aller: http://catonthecouchproductions.com/fish/ et ces images sous le menu déroulant sont supposés être cachés puis apparaissent en survol, j'ai ceci jusqu'à présent:

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

Mais ça se comporte bizarrement. Des suggestions sur ce que je peux faire? Je pense qu'une fois monte les autres glissades prenant sa place. Dois-je utiliser animate () pas slideDown?

Answer 1

Au lieu de .slideDown () et .slideUp () essayez d'utiliser respectivement:

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

et

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

Answer 2

Vous pouvez toujours utiliser le slideDown, slideUp, ce qui est vraiment utile. Je pense que votre problème est avec le .hover, essayez avec .mouseover puis avec mouseout comme rappel. Parce qu’à présent, il semble que l’arrêt du curseur n’appelle pas correctement car il se répète encore et encore. De plus, je ne comprends pas ce qui est censé se passer exactement, je pense que vous avez mélangé certains éléments ou quelque chose. Vous pouvez également essayer d’ajouter une classe aux éléments supposés être masqués ou affichés, puis utiliser le fichier .hasClass (); quand vous voulez vérifier s'ils ont une classe ou non, vous pouvez ainsi déterminer si vous devez la faire glisser vers le haut ou le bas.

Answer 3

Tout d’abord, n’avez pas de cours pour des éléments individuels. Vous pouvez les personnaliser individuellement à l'aide d'identifiants et ne disposer que d'une seule fonction de survol pour tous les objets de la même classe (par opposition à un copier-coller à quatre reprises).

Deuxièmement, voici la structure de base que vous devriez avoir:

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

Vous n'avez pas besoin d'avoir le " .info " les éléments en tant qu’enfants des boutons, mais ils doivent être accessibles sans identifiant unique (c’est-à-dire l’élément suivant ou l’enfant).

Cela rend le javascript facile:

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

Vous pouvez également le modifier de manière à améliorer son fonctionnement:

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

Answer 4

essayez ceci:

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