Hello Friends

 

I'm new to jQuery, I've quickly read some stuff and attempted to duplicate, here's my code:

 

$(document).ready(function(){
  $("about").mouseover(function(event){
	alert("OY !!");
  });
});

 

And here's what #about is:

 

<li id="about"><a href="#" class="about">About</a></li>

 

I move my mouse over the <li> and nothing happens ! I do not get the alert box !

 

I would greatly appreciate any help.

 

PS. the alert is just to make sure things are working as they should before I move onto what I really need doing.

 

Thank You.

$(document).ready(function(){
  $("#about").mouseover(function(event){
	alert("OY !!");
  });
});

Huh silly me

 

Thank You Renaissance Design

 

Now that I know that is working, I went to the jQuery website and searched for Rotate. Cause when a user moves the mouse over the <li> tag I want the thing slightly rotated.

 

If it isn't in the jQuery library, how can I rotate it slightly ?

 

Thanks

with CSS3

Good thinking Pedro, I did not think of that ! Will it allow animating too ?

 

Either way, I can't get it to work

 

$(document).ready(function(){
  $("#about").mouseover(function(event){
	$(this).css(-webkit-transform, rotate(-90deg));
  });
});

Never mind, the above, I didn't know the css property and value had to be in quotes.

 

This works:

 

$(document).ready(function(){
  $("#about").mouseover(function(event){
               $(this).css("-webkit-transform", "rotate(-90deg)");
  });
});

 

But not animated, so it flips very fast. I'll check out the animate method.

I made this to give you an exmaple of how to do it

http://jsfiddle.net/peduarte/H8vxy/

Wow cool !! Thanks Pedro.

 

I was actually going through with this tutorial regarding the animating bit. And I got my code to be like so:

 

$(document).ready(function(){
  $("#about").mouseover(function(event){
	$(this).animate({
		'-webkit-transform' : 'rotate(-15deg)'
	  }
	);
  });
});

 

Unfortunately it isn't working, what's the reason behind why my way of doing it is not working ?

Hmmm, not sure, but you might have to also include jQuery UI for your animate to work.

It's probably best to do it using CSS though man, it doesn't make sense doing a CSS rotate via jQuery.

Thanks Pedro, I have my code as follows now:

 

$(document).ready(function(){

// When cursor moves onto the <li>
  $("#about").mouseover(function(event){
	$(this).css({

	'-webkit-transition': '200ms all ease-in-out', 
       'webkit-transform': 'rotate(-10deg)',
	'-moz-transition' : '0.2s ease-in-out',
	'-moz-transform' : 'rotate(-10deg)'

	});
  });

  // When cursor moves away from <li>
  $("#about").mouseout(function(event){
	$(this).css({

	'-webkit-transition': '200ms all ease-in-out', 
       'webkit-transform': 'rotate(0deg)',
	'-moz-transition' : '0.2s ease-in-out',
	'-moz-transform' : 'rotate(0deg)'

	});
  });
});

 

Is there a CSS3 property for also making the box inflate slightly ? i.e. get bigger a bit, and also rotate, then deflate to original size ?

 

Thanks so much.

Getting bigger with css3 : -webkit-transform:scale(5);

and your original size with -webkit-transform:scale(1);