Animating a div with a backstretch in it

Question

I am trying to use a div that is set to 100% of the initial browser window, with the Backstretch plug-in applied to it, and have it animate on a click to resize to a smaller dimension, while another div underneath it resizes as well, allowing them to share the screen. All the functionality seems to work, accept that the div will resize and the backstretch will go with it initially, but after the animate function is over, the backstretch will snap back to 100 percent of the window. Even weirder is that when the entire browser is resized by the user, the backstretch will snap into the correct position, and remain there.

I put this into a jsfiddle and the problem works exactly the same way that it does in my code. The click function resizes the div, and the backstretch snaps out of it until the browser is resized. Normally I love trying to figure this kind of thing out, however I think this might be over my head, and I have a hard and fast deadline coming up and this problem has been holding me up for 2 weeks. Any insight would be tremendously helpful.

Heres the code I'm working with:

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);
});

Animating a div with a backstretch in it

0 Answers0