I am working on a project that involves animating the width of a horizontal list to simulate a scroll closing effect.
You can view the issue in this Fiddle: http://jsfiddle.net/a5Tfu/1/
The main problem is that when the width shrinks and overlaps any element other than the first one, the content of that element disappears abruptly instead of gradually moving off the edge of the list as the width decreases.
What I aim for is to achieve the same smooth resizing effect that occurs with the first element, but apply it to all elements in the list.
Below is the CSS code:
#container {
position: relative;
overflow: hidden;
width: 1000px;
height: 400px;
}
#list {
background: #f7f7f7;
overflow: hidden;
width: 1660px;
height: 400px;
}
#list li {
width: 400px;
height: 400px;
list-style: none;
float: left;
}
#left {
position: relative;
float: left;
width: 200px;
height: 400px;
}
#right {
position: relative;
float: right;
width: 200px;
height: 400px;
}
Here is the HTML template:
<div id="container">
<ul id="list">
<li>
<div id="left">
<p></p>
</div>
<div id="right">
<p></p>
</div>
</li>
<li>
<div id="left">
<p></p>
</div>
<div id="right">
<p></p>
</div>
</li>
<li>
<div id="left">
<p></p>
</div>
<div id="right">
<p></p>
</div>
</li>
<li>
<div id="left">
<p></p>
</div>
<div id="right">
<p></p>
</div>
</li>
</ul>
</div>
And here is the JavaScript code:
$(function(){
$('#list').animate({width: '200px'}, 5000);
});
Thank you for your help!