Forums

mshort1985

Hi all, this jQuery code i wrote isn't working, its telling me there is a syntax error on the line with "$(this).animate({" but I don't see it.

$(document).ready(function(){
	
	$("#navigation li a").hover({
	
		$(this).animate({
		
			border-bottom-left-radius: '0',
			border-top-right-radius: '0',
			border-top-left-radius: '20px',
			border-bottom-right-radius: '20px',
			
		}, 5000);
	
	});

});

whiteInkDesign

$(document).ready(function(){
	 $("#navigation li a").hover(function() {
			 $(this).animate({"border-radius":"20px 0"}, 5000);
	 });
});

5000 seems like a long time for a hover effect.

mshort1985

sadly that doesn't work either :(

whiteInkDesign

yes it does, are you loading jqeury? The 5000 puts a 5 second delay on the effect.

mshort1985

yes i'm loading jquery, the console keeps telling me theres a syntax error

whiteInkDesign

then its in some other part of your script, console.log in firebug to troubleshoot it i guess.

mshort1985

I copied and pasted my entire script onto this thread, so what you see is my entire script.

whiteInkDesign

This is my test doc and its working here.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>js border radius</title>
<style>
a {background-color:red;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script&gt;
<script>
$(document).ready(function(){
         $("#navigation li a").hover(function() {
                         $(this).animate({"border-radius":"20px 0"}, 5000);
         });
});
</script>
</head>
<body>
<ul id="navigation"><li><a href="#">This is a link</a></li></ul>
</body>
</html>

TT_Mark

In your script I don't think you should have that last comma after the bottom-right radius line

BoringCode

@TT_Mark: Was just about to suggest that. That is the problem ;)

Josh

I should note that the .hover() is made to control both the MouseOver and MouseLeave events. If you're only using it for a MouseOver i suggest using .mouseover()

$().hover(
function(){
	 // on mouse over code
},
function(){
	 // on mouse leave code
});

mshort1985

Thanks all,

I got it working in the end

@josh, i was planning to add a mouse out event also i just kept it simple to start with to weed out any issues.

Thanks again all.

treehouse : what would you like to learn today?

Forums

can someone tell me what i've done wrong with this following code