Animate using opacity works but sliding does not?

Animate using opacity works but sliding does not?

Hi all,

New to jQuery and JavaScript in general so hopefully I am doing something really stupid?

I have 2 divs on a page, the outer div has an inner div nested within it, both have different background images set to them.

I managed to program the following fine:

  1. $(function(){
    $("div.outer").hover(
    function() {
    $("div.inner").stop().animate({"opacity": "0"}, "slow");
    },
    function() {
    $("div.inner").stop().animate({"opacity": "1"}, "slow");
    });
     
    });









So that when you hover over the div, the inner div with the background image fades in, and then out on rollout.

Why will the following code not slide the inner div up and down:

  1. $(function() {
    $("div.outer").hover(
    function() {
    $("div.inner").stop().animate({top:"-200px"},{queue:false,duration:200});
    },
    function() {
    $("div.inner").stop().animate({top:"0px"},{queue:false,duration:200});
    });

    });









Am using jQuery 1.5 min

Thanks,

Regards.