Question

I have been deseperately looking for the scripts which do similar effect on links like here: http://applemaybe.com/

see on top menu, clicking the link, hover state does not come immediately but faded, also the icon slides up in a nice way. I need the script which makes the exact same effect please.

Any help appreciated.

Answer 1

They are actually using CSS3 transitions. If you accept that it doesn’t work in all browsers since it is an eye-candy effect, I would suggest you to do the same. Doing it in JavaScript will probably not yield as good result and might also have poor performance results.

Doing it in CSS3 is easy and fast. On the mentioned site they just have this CSS3 class:

a, .link {
    -moz-transition: color 0.4s ease-in-out 0s;
    ...
}

However it will only work in Firefox in this case. You should take care that CSS3 is not finished yet so it might evolve in the future.

See this page for documentation on CSS3 transitions.