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: /

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

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

• javascript
• jquery

• You mean something like slideDown()? I'm not sure I understand what you want, but if you need multiple transitions at the same time, .animate() is the only way to go. – Christian Commented Apr 3, 2012 at 14:09
• i need soemthing thats going to slide down yes.. do you have an example of this slideDown? – SOLDIER-OF-FORTUNE Commented Apr 3, 2012 at 14:10
• jQuery('div').slideDown('slow'); – Christian Commented Apr 3, 2012 at 14:11
• 1 .animate works by transitioning from the initial state of your object to the final state defined in the parameters. It sounds like you are assuming that {left:0} is the only option, but you can animate just about any CSS property which takes a numeric property. A slide down can be achieved by animating the height, for example. – Evan Davis Commented Apr 3, 2012 at 14:11
• could you guys provide an answer instead please. slideDown() wont work with my current code: see edit. – SOLDIER-OF-FORTUNE Commented Apr 3, 2012 at 14:13

4 Answers 4

You probably want jQuery slideDown, see: http://api.jquery./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();
 }
);

What about css3 transitions? They are smooth and are starting to be widely supported.
Here's an example which doesn't use javascript at all.

Update : Another example that doesn't use opacity.

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

  },
  function () {
    $(this).children(".sectorImage").children(".showme").css("display", "none").css("margin-top","-25px");
  }
);​

​Now it works

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

​

​