Simple animation problem

harvs899 · 10-23-2012, 09:23 PM

Basically I have an UL containing LIs which in turn have links in them for navigation, basically I am trying to get these list items to enlarge downwards on mouse over, which means animating the padding-top property, then when the mouse leaves reverse the process, so after a fiddle around I came to this which worked:

Code:

 $(document).ready(function() {
	$("#mainnav li").mouseover(function() {
		$(this).animate({padding:'100px'},{queue:false,duration:200});
	});
	$("#mainnav li").mouseout(function() {
		$(this).animate({padding:'60px'},{queue:false,duration:200});
   });
 });

But as you can see, the 'padding' property is used and not 'padding-top' because as soon as I use 'padding-top' it refuses to work, why is this? What do I have to use instead?

Here's my HTML if needed:

Code:

<!DOCTYPE html>
<html>
	<head>
		<title>Visual Difference</title>
		<link rel="stylesheet" type="text/css" href="css/maincss.css"> 
		<script src="jquery.js" type="text/javascript"></script>
		<script src="custom.js" type="text/javascript"></script>
	</head>
	
	<body>
		<header id="pageheader">
			<nav id="mainnav">
				<ul>
					<li class="leftmost">
						<a href="" class="current">Home</a>
					</li>
					<li>
						<a href="" class="current">About</a>
					</li>		
					<li>
						<a href="" class="current">Products</a>
					</li>		
					<li>
						<a href="" class="current">Gallery</a>
					</li>		
					<li>
						<a href="" class="current">Contact</a>
					</li>								
				</ul>
			</nav>	
		</header>
		
		<img id="titleimage" src="http://placehold.it/900x400" onClick="mover()";>
		<hr id="pagesplit"/>
		<div id="pagewrapper">
			<div id="figwrap">
				<figure>
					<img src="http://placehold.it/300x250"/>
					<figcaption>
						<p>Sample image</p>
					</figcaption>
				</figure>
				<figure>
					<img src="http://placehold.it/300x250"/>
					<figcaption>
						<p>Sample image</p>
					</figcaption>
				</figure>
				
				<figure>
					<img src="http://placehold.it/300x250"/>
					<figcaption>
						<p>Sample image</p>
					</figcaption>
				</figure>
			</div>			
		</div>
	</body>
</html>

devnull69 · 10-24-2012, 09:37 AM

Use "padding-top" (together with the quotes) or paddingTop (camel case)

All CSS properties that contain dashes usually translate into Javascript using camel case. If you use the property inside a string, you can still use the CSS notation including the dashes.