Fade with jQuery while also changing font-style and text

[chrisburton]

I’m setting up a possible colophon for my about page to display the webfonts I’m using. I’m wondering if it was possible to have jQuery do the following:

+ Fade cycle from Aa to Zz

+ Change font-style from normal to italic before switching to the next characters

Example ( “=>” represents fading ):

Aa => Aa => Bb => Bb…etc

CodePen

[Podders]

@chrisburton

Had to change to a fiddle, it seems that codepen strips out the fromCharCode from the js,

You may have to play around with the timing and css to get it perfect but the functionality is here

http://jsfiddle.net/v377Q/3/

[chrisburton]

Awesome, thank you! I’ll take a look as soon as I arrive home.

[chrisburton]

Is there any way to condense this down further and also perhaps comment it so I can make adjustments?

There seems to be a delay from roman to italic so I’m trying to figure out the code to solve it.

http://jsfiddle.net/M3VvF/

Update: Chris told me that CodePen strips `fromCharcode` as it’s a security risk for them. I wonder if it’s a security risk in general as I found it on some XSS tutorials. Kind of makes me a bit nervous.

[Podders]

@chrisburton

I’ve updated your fiddle to include comments too so you can understand whats going on,

Edit: Sorry, totally forgot to add the link :)
http://jsfiddle.net/M3VvF/1/

fromCharcode can be used for malicious purposes as its a great way to mask values that may otherwise be sanitized,
for example, if you execute the following in the browser console

alert(String.fromCharCode(67, 83, 83, 32, 84, 114, 105, 99, 107, 115, 32, 82, 111, 99, 107, 115, 33, 33));

You’ll see that it will return a string representation of the char codes, this could be used to evaluate a function name or similar that would normally be stripped out of user input,

However, it is a very userful function for situations like this one where we need to programaticly manipulate strings based on it’s charcode,

[chrisburton]

I really appreciate the help @Podders!

[chrisburton]

Sorry to bug again, there seems to be a noticeable difference in the fading. It looks fine when it fades into the italics but from the italics to roman, it seems a bit faster. Also, even with commenting the JS, it’s still a bit complicated to edit.

And would it be possible to only allow the cycle to happen when the whole entire div is hovered?

[Podders]

Sure, I’m at work at the moment so will take a look again on my lunch break,

[CrocoDillon]

Can maybe help you on the fade bug, edit line 29 to:

$(this).css(‘font-style’,’normal’);

because `$(this).removeAttr(‘style’);` removes the opacity added by jQuery’s fade function too. Hope that helps.

EDIT: That and the total interval time is 4000ms, each fade is 200ms and the normal state is 2000ms… so that leaves 1200ms for the italic state since there are 4 fades total (4000 – 4×200 – 2000). You can either make the total interval time 4800ms or the normal state 1600ms.

Another EDIT: @Podders, the problem with using an interval is they sort of ‘keep running’ when the window loses focus. So when your tabbed out for a while and come back it skipped half the alphabet. Maybe it doesn’t matter here but else using timeouts instead might help.

[chrisburton]

@CrocoDillon Well, that makes sense and your updates seemed to work. Thanks for the help.

Update:

@Podders Hopefully you haven’t started yet. I think we should hold off on this until I’m certain this is what I would like as I’m still testing the layout on my about page. I’m having a few issues on the layout therefore, I need to tweak a few things, first. And I’d rather not waste your time at this stage.

[Author]

Posts