Slide div/image out partially with JQuery

Question

i'm facing a problem i cant solve on my own:

I got a div with a background image which i want to toggle slide up/down when the div is clicked. Problem is the image always slides up completely (100%) so it is gone. I want it to stay out 20% so you can click on it and it slides down 100% again.

I tried .animate() but it changes the aspect ratio of the picture, it wont slide out then.

I checked solutions like http://spoonfedproject.com/jquery/jquery-slide-with-minimum-height/ where divs slide in/out but it doesnt have the background picture...

Anyone got an idea? I would really appreciate it!

JS Fiddle: http://jsfiddle.net/JmLqp/105/

HTML Code

<div id="contact"></div>

CSS Code

#contact{
 width:162px;
 height:336px;
 background: url(http://s18.postimage.org/kl4b1rly1/bg_contact.png) no-repeat;
}

JS Code

$("#contact").click(function () {
  $(this).hide("slide", {direction: "up"}, 1000);
});

Answer 1

You were on the right track with animate():

$("#contact").css('position', 'relative').click(function () {
    if($(this).offset().top == -250) {
         $(this).animate({'top': '0px'}, 1000);
    }
    else {
         $(this).animate({'top': '-250px'}, 1000);
    }
});

Note that you have to set the position to relative for yourself as above.

Working Fiddle

Answer 2

Just set position: relative to your animated div, see working jsfiddle

#contact{
    position:relative;
    width:162px;
    height:336px;
    background: url(http://s18.postimage.org/kl4b1rly1/bg_contact.png) no-repeat;

}

$("#contact").click(function () {
    tp = $(this).css('top') == '0px' ? '-270px' : '0px';
    $(this).animate( {top: tp }, 1000);
});

UPDATE:
I've also updated my jsfiddle to make it both go up and down, it was a minor addition.