Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Oct 2012
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Simple animation problem

    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>

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,391
    Thanks
    11
    Thanked 565 Times in 558 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •