Question

On hover I want my div to scroll down.

I know i can use the .animate({left: 0}, "slow"); but this doesnt go down but what else does jquery have to offer?

Here is my jsfiddle: http://jsfiddle.net/WZvPk/4/

hover over the sectors box and you will see the “view project” move down. I need it to move down in a slow fashion similar to http://www.jeremymartin.name/examples/kwicks.php?example=3

Then need the opacity to be so my image is darker.

edit: slide down wont work with this:

 $(".sectorGrid").hover(
  function () {
    $(this).children(".sectorImage").children(".showme").css("display", "block").css("margin-top", "-5px");
  },
  function () {
    $("div.sectorImage div.showme").css("display", "none");
  }
);

Answer 1

You probably want jQuery slideDown, see: http://api.jquery.com/slideDown/
Edit:
So something like this:

$(".sectorGrid").hover(
 function () {
    $(this).children(".sectorImage")
    .children(".showme")
    .css("display", "block")
    .css("margin-top", "-5px")
    .slideDown("slow");
},
 function () {
   $("div.sectorImage div.showme").hide();
 }
);

You could also, add a css class with the margin-top and display-block property, like:

.slideDown { display: block !important; margin-top: 5px !important; }

/* !important so they won't be overwritten..*/

Then you can do something like this:

$(".sectorGrid").hover(
 function () {
    $(this).children(".sectorImage")
    .children(".showme")
    .addClass("slideDown")
    .slideDown("slow");
},
 function () {
   $("div.sectorImage div.showme").hide();
 }
);