Question

我遇到了一个我无法解决的问题：

我有一个背景图像的div，我想在点击div时向上/向下滑动。问题是图像总是完全滑动（100％），所以它消失了。我希望它能保持在20％之内，这样你就可以点击它并再次向下滑动100％。

我试过.animate（）但它改变了图片的宽高比，它不会滑出来。

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

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

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，请参阅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以使它上下都有，这是一个小小的补充。

使用JQuery部分滑动div / image

2 个答案: