how to split <div></div> into even and odd parts ? And how to slide even parts to top-right & odd parts to bottom-left using jquery?

I want to make small parts of single div for animating. I want to hide div by splitting it into small pieces with explode effect.

What do you mean by split?

<style>
.odd{height:5px; background:#960;}
.even{height:5px; background:#09C;}
</style>

<script src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
			$('div:odd').addClass('odd');
			$('div:even').addClass('even');
})
</script>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>

for more jquery selectors use
http://www.w3schools.com/jquery/jquery_ref_selectors.asp

These are multiple div's. I want to divide single div into even and odd parts to animate

<style>
.odd{height:5px; background:#960;}
.even{height:5px; background:#09C;}
</style>

<script src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
			$('div:odd').addClass('odd');
			$('div:even').addClass('even');
})
</script>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>

for more jquery selectors use
http://www.w3schools.com/jquery/jquery_ref_selectors.asp

Something like this?

$(function()
{
    $("#myDivID").children(":odd").animate(); // Animate odd
    $("#myDivID").children(":even").animate(); // Animate even
});

Hey, Thanks!

This can be used to animate div, but how to make small parts of single div?


Something like this?

$(function()
{
    $("#myDivID").children(":odd").animate(); // Animate odd
    $("#myDivID").children(":even").animate(); // Animate even
});

I don't think that is possible, at least I never come across something like that.