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.

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.

• javascript
• jquery
• html
• css
• slice

• 1 If you end up doing it yourself, take a look at jQuery UI's explode effect for inspiration: docs.jquery./UI/Effects/Explode (it works with text) – thirtydot Commented Jun 18, 2012 at 16:41

3 Answers 3

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

​

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

you could make 2 divs, and have each set with overflow:hidden;.

After that, place the text at same position left, but one slightly below it's div and one slightly above so that each text is 'cut' in half. (or this is one work-around to do it)