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

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');