Backstretch プラグインを適用して、最初のブラウザ ウィンドウの 100% に設定された div を使用しようとしています。クリックするとアニメーション化されて小さいサイズに変更され、その下にある別の div は次のようにサイズ変更されます。まあ、彼らが画面を共有できるようにします。すべての機能が動作しているように見えます。最初は div のサイズが変更され、バックストレッチがそれに伴いますが、アニメーション機能が終了すると、バックストレッチはウィンドウの 100% に戻ります。さらに奇妙なのは、ユーザーがブラウザー全体のサイズを変更すると、バックストレッチが正しい位置にスナップされ、そこにとどまることです。
これをjsfiddleに入れると、問題は私のコードとまったく同じように機能します。クリック機能は div のサイズを変更し、ブラウザのサイズが変更されるまで、バックストレッチは 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);
});
</p>