使用 JQuery 将 div/image 部分滑出答案

【问题标题】：Slide div/image out partially with JQuery使用 JQuery 将 div/image 部分滑出
【发布时间】：2013-02-02 15:00:21
【问题描述】：

我面临一个我自己无法解决的问题：

我有一个带有背景图像的 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);
});

【问题讨论】：

标签： jquery html slide slidetoggle jquery-effects

【解决方案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

【讨论】：

哦，顺便说一句，这不会再次滑回。为此，您可能需要根据需要将标志和animate 和top 属性存储到-250px 或0。
@Aspiring Aqib：嗯，我确实说过它不会滑倒。问题是它一直滑出而不是大部分滑出——而不是上下滑动——所以我决定坚持核心问题。
超？不只是解释为什么我只做了我所做的那么多:-)
我怎样才能在我的问题中达到同样的效果：stackoverflow.com/questions/28132970/… 谢谢。

【解决方案2】：

只需将 position: relative 设置为您的动画 div，请参阅 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);
});

更新：
我还更新了我的 jsfiddle 以使它既能上升又能下降，这是一个小的补充。

【讨论】：