[evinrows]

		
<script type="text/javascript">
	$(document).ready(function() {

		$('td').hover(function() {
			$(this).animate({
			background-color: "#fff"
			}, 1500);
		});			
	});
</script> 

Trying to make a grid that lights up when you hover over the boxes. Anyone know why it is not working? :[

This post has been edited by evinrows: 24 August 2009 - 01:47 AM

[Wimpy]

The hover-event takes to functions as its' parameters, the first that executes what should be done on mouseover and one that executes what should be done on mouseout, you only give it one (1) function.

Read the documentation on the hover-event:
http://docs.jquery.c...s/hover#overout

Other than that I can't see any error in your code (as of now). Hope it helps!

This post has been edited by Wimpy: 24 August 2009 - 03:42 AM

[evinrows]

Thanks! :]

[evinrows]

I'm still having trouble, this is what I came up with:

		<script type="text/javascript">
			$(document).ready(function() {
				$("td").hover(
					(
						alert("on");
					),
					(
						alert("off");
					)
				);
			});
		</script>

I'm just trying to get this to work for now, and I really don't want to give up and use mouseover. By the way, theres no helpful tools for debugging jQuery besides firebug, right?

This post has been edited by evinrows: 24 August 2009 - 05:19 AM

[Wimpy]

You have to wrap the alert()-statements in functions like this:

$(document).ready(function()
{
	$("td").hover
	(
		function()
		{
			alert("on"); 
		},
		function()
		{
			alert("off");
		}
	);
});

evinrows, on 24 Aug, 2009 - 02:14 PM, said:

By the way, theres no helpful tools for debugging jQuery besides firebug, right?

I acutally haven't got a clue since I've never even just firebug cause I think it suck too much, I simply use the Error Console in Mozilla Firefox which doesn't give you debugging functionality but it always seem to point me in the right direction!

This post has been edited by Wimpy: 24 August 2009 - 05:29 AM

[evinrows]

Thanks again for your help.

[evinrows]

Okay, so I changed it to have the animate functions and now it doesn't work.

$(document).ready(function() {
	$("td").hover
	(
		function() {
			$(this).animate({
				background-color: #fff;
			}, 1500 );
		},
		function() {
			$(this).animate({
				background-color: #000;
			}, 1500 );
		}
	);
});

Sorry I'm awful at this. So many semicolons and parenthesis and curly braces, it's so hard to tell by looking at it what it is saying.

This post has been edited by evinrows: 24 August 2009 - 05:56 AM

[evinrows]

There must be something wrong with my animate function since if I replace it with anything, it works... (like addClass and removeClass). But I can't see it.

[Wimpy]

the problem you have this time is that you have a ";" after the css-property you want to change, which messes up the javascript, by simply changing you code to this (note that I've only removed two ";") it should be working fine:

$(document).ready(function() {
	$("td").hover
	(
		function() {
			$(this).animate({
				background-color: #fff
			}, 1500 );
		},
		function() {
			$(this).animate({
				background-color: #000
			}, 1500 );
		}
	);
});

[evinrows]

I copied and pasted your code exactly and it still doesn't work. :[

[Wimpy]

Yeah right, my bad, you can't have the hyphens in there, it should be "backgroundColor" and you also need the color animations plugin: http://plugins.jquer...m/project/color

[evinrows]

Finally! Thank you so much.

Kind of silly though, I wonder why they didn't just use CSS property names for convenience.

[Wimpy]

I can actually agree with you, but I think they have made it this way to avoid conflicts and additional parsing since Javascript already is using the backgroundColor-syntax and the hyphen "-" is a operator as well (4 - 3 == 1).

If you ask someone in the jQuery-development team I can almost promise you that you will get very logical answer as to why they have done it this way!

Glad you got it to work!

evinrows, on 24 Aug, 2009 - 03:16 PM, said:

Finally! Thank you so much.

Kind of silly though, I wonder why they didn't just use CSS property names for convenience.