1

我正在尝试使用一个设置为初始浏览器窗口 100% 的 div，并应用 Backstretch 插件，并让它在单击时设置动画以调整到更小的尺寸，而它下面的另一个 div 调整为好吧，允许他们共享屏幕。所有功能似乎都可以正常工作，接受 div 将调整大小并且最初会随之进行回弹，但在动画功能结束后，回弹将迅速回到 100% 的窗口。更奇怪的是，当用户调整整个浏览器的大小时，后伸会卡到正确的位置，并保持在那里。

我将它放入jsfiddle中，问题的工作方式与我在代码中的工作方式完全相同。click 函数会调整 div 的大小，并且 backstretch 会从其中弹出，直到浏览器调整大小。通常我喜欢尝试解决这种问题，但是我认为这可能超出了我的想象，而且我的最后期限即将到来，这个问题已经困扰了我 2 周。任何见解都会非常有帮助。

这是我正在使用的代码：

HTML

<div id="fullbleed">
<div class="button">CLICK</div></div>
<div id="article"></div>`

CSS

html, body {
height:100%;
}
body {
margin:0;
padding:0;
}
.button{
width: 70px;
height: 30px;
background-color: fuchsia;
bottom: 190px;
position: absolute;
cursor: pointer;
font-family: 'Open Sans' sans-serif;
font-weight: bold;
text-align: center;
padding: 3px;
font-size: 21px;
left: 41px;
}
#fullbleed{
position:inherit;
top:0;
left:0;
height:100%;
width:100%;
}
#article {
height:0px;
overflow: hidden;
margin-top: 30px;
background-color:aqua;
}

JS

$("#fullbleed").backstretch("http://dl.dropbox.com/u/515046/www/coffee-light.jpg");

$(".button").click(function() {
$("#fullbleed").animate({
    height: "200px",
}, 1000);
$(".button").css({
    "visibility": "hidden"
});
});

$(".button").click(function() {
$("#article").animate({
    height: 5000,
}, 1000);
});​

​</p>

4

0 回答 0