使用JQuery将div/image部分滑出

Question

我正面临着一个我不能单独解决的问题：

我得到了一个带有背景图像的div，当点击div时，我想要切换上下滑动。问题是图像总是完全向上滑动(100%)，所以它消失了。我希望它保持在20%的位置，这样你就可以点击它，它会再次下滑100%。

我尝试过.animate()，但它改变了图片的纵横比，它不会滑出。

我检查了像http://spoonfedproject.com/jquery/jquery-slide-with-minimum-height/这样的解决方案，其中div滑入/滑出，但它没有背景图片……

有谁有主意吗？我真的很感激！

JS小提琴：http://jsfiddle.net/JmLqp/105/

HTML代码

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

CSS代码

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

JS代码

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

Answer 1

你和animate()走在正确的道路上

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

请注意，您必须如上所述将position设置为relative。

Working Fiddle

Answer 2

只需将position: relative设置为您的动画div，请参阅

#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);
});

更新：

我还更新了我的jsfiddle，使它可以向上和向下移动，这是一个很小的补充。