Smoothen out character prepend

Hey Guys,

I wanted to prepend a character to menu items when the mouse will hove over them. An example of this is seen on the website of Minivegas, here: http://minivegas.net/

When you hover over a menu item at the top a slash appears in front. There seems to happen a couple of things to smoothen out the effect of prepending the character. I was looking for a similarly smooth way of adding a character in front of my menu items.

Can anybody help me out on how to do this? I'm also unable to find out exactly how they did it on the Minivegas website.

Anybody any ideas?

Thanks in advance!

Regards,
Roy

This is how minivegas did it

1. on mouseenter, prepend the content of the link with a span containing the backslash with a font-size of 0px
2. animate the font-size to 14px in about 200 milliseconds
3. on mouseleave, animate the font-size back to 0px in about 200 milliseconds and then remove the span

See example here (http://jsbin.com/ogaroy/2) (Hint: When you hover the mouse over the example page you will see the button "Edit in jsbin.com" on the top right corner. You can use this button to see the full source (HTML/CSS/Javascript) of the example)

Thanks for the reply!

That's a nice trick as well, though it looks a bit different. I don't know why?

I was thinking about creating a div that is containing the fixed size slash and set its overflow to hidden en animate its width from zero to the width of the character. Is there any way to get the width of a character with javascript?

Would this work?

Regards,
Roy

This would also work

Example here (http://jsbin.com/ogaroy/4)

Thanks!

Two great things for me to play with! Once I've got this thing running I'll definitely try and post the outcome of it here. ;) Maybe you have a tip or two about my version!

Thanks again!

Regards,
Roy

So!

I've implemented a version.
Here it is:

http://www.colorbleed.nl/dev2/

Any tips on the functionality on it (or maybe even on the slideshow I created) are welcome!

Thanks again.

Regards,
Roy