jQuery dropdown - CSS issues

Question

Hey, if you to go: http://catonthecouchproductions.com/fish/ and those images under the dropdown are suppose to be hidden then appear on hover, I have this so far:

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

But it is behaving weird. Any suggestions on what I can do? I think since once goes up the other slides over taking its place. Should i use animate() not slideDown?

Answer 1

try this:

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

Answer 2

You can still use the slideDown, slideUp, which is really useful. I think your problem is with the .hover, try with .mouseover and then mouseout as the callback. Because now it seems the event to stop the slider isn't called properly since it loops again and again. Also, I don't get the hang of what's suppose to happen exaclty, I think you've mixed up some elements or something. You can try to add a class as well on items who're supposed to be hidden or showed and then use the .hasClass(); when you want to check if they have a certain class or not, that way you can determine if you should slide it up or down.

Answer 3

First off, don't have classes for individual items. You can individually style them using ids, and have just one hover function for all objects with the same class (as opposed to copy and pasting four times).

Second off, here's the basic structure you should have:

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

You don't need to have the ".info" elements as children of the buttons, but they need to be accessible without a unique id (ie the next element or the child).

That makes the javascript easy:

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

Or, you could modify it like so to make it work better:

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

Answer 4

Instead of .slideDown() and .slideUp() try to use respectively:

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

and

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