jQuery slice div into animatable segments

Question

is it possible using jQuery and CSS to split a div in two, and then animate the two parts separately?

To better explain, see this diagram:

Any help would be much appreciated - thanks in advance.

Answer 1

You can fake it with a pair of container divs like this: jsFiddle example.

HTML

<div id="top"><div>Some text here</div></div>
<div id="bottom"><div>Some text here</div></div>​

CSS

#top,#bottom {
    background: #333;
    width:200px;
    height:100px;
    position:relative;
    overflow:hidden;
}
#top div {
    position:relative;
    top: 90px;
    color:#eee;
    text-align:center;
}
#bottom div {
    position:relative;
    top: -10px;
    color:#eee;
    text-align:center;
}

jQuery

$('#bottom').delay(2000).animate({
    bottom: '-200px'
},4000);
$('#top').delay(2000).animate({
    top: '-200px'
},4000);

​

Answer 2

No, you can't show one div like that. But you could duplicate and restrict size to half on each copy, then animate both.