Jquery Animate Width

**Deadweight** · 02-28-2014, 02:55 AM

So I am currently have a problem with jquery's animate. I am trying to anime an '<ul> <li>' it works with

Code:

$(this).next('li').animate({width:'toggle'},300)

but doesn't work with

Code:

$(this).next('li').animate({width:'300px'},300)

here is the a sample code:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Game Selection</title>
<style>
* { margin:0 auto; padding:0;}
body { background-color:#CCCCCC;}

#group2 { width: 90%; margin-top:5px;}
#group2>li { list-style:none; float:left; border:1px solid black; height:300px; border-left:none;}

.spacer { clear:both;}
</style>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>

$(function(){
	
	group2()
	
})
function group2(){
	
	$('#group2>li').first().css('border-left','1px solid black')
	
	$('#group2>li:odd').css('display','none').css('width','300px')
	$('#group2>li:even').css('cursor','pointer')
	$('#group2>li').eq(1).show(300)
}

$(document).on('click','#group2>li:even',function(){
	$(this).next('li').show(300)
	$(this).prevAll('li:even').hide(300)
	$(this).next('li').nextAll('li:odd').hide(300)
})

</script>
</head>
<body>

<div><ul id="group2">
	<li class="bce_show">X</li><li>Something</li>
	<li class="bce_show">Y</li><li>Something</li>
        <li class="bce_show">Z</li><li>Something</li>
</ul><div class="spacer"></div></div>

</body>
</html>