1

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

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

2 回答 2

6

你在正确的轨道上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

工作小提琴

于 2013-02-02T15:07:08.227 回答
0

只需设置position: relative为您的动画 div，请参阅工作 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 以使其同时上升和下降，这是一个小的补充。

于 2013-02-02T15:13:33.897 回答