Question

我正在尝试使用设置为初始浏览器窗口的100％的div，并将Backstretch插件应用于它，并使其在单击时设置动画以调整为较小的尺寸，而另一个div位于下方它也调整大小，允许他们共享屏幕。所有功能似乎都有效，接受div将调整大小并且后退将最初与它一起使用，但是在animate功能结束后，backstretch将快速恢复到窗口的100％。甚至更奇怪的是，当用户调整整个浏览器的大小时，后伸将会捕捉到正确的位置，并保持在那里。

我把它放到jsfiddle中，问题与我的代码完全相同。 click函数调整div的大小，并且后退拉出它直到调整浏览器大小。通常情况下，我喜欢尝试将这种事情弄清楚，但是我认为这可能是我的头脑，而且我有一个艰难而快速的截止日期，这个问题一直困扰我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);
});

动画一个带有后伸的div

0 个答案: