kvSmoothTransition - Making rollovers fade smoothly

So, let this be the first script I talk about, in this blog. This script is made out of the pure need of it. My company was doing lots of websites, where we simply wanted to smooth fade buttons on rollover/hover. Back then, there was some of the CSS transitions out there.. But they werent working like they should, also they didnt work with coded-gradients.

Note Much love to the guys at Colorzilla for their awesome application for CSS3 gradients!

Legwork

So I setup a StackOverflow question for that, which didnt work at first, but after adding bounties, it gained some interests.
As you can see, the first answer is CSS3 transitions, which didnt work at the time with gradients (not sure if it works right now.) The closest thing to what I wanted, was this jsfiddle by btleffler. However it was very bulky and glitchy, with the whitespace showing between the transitions.

So, I saw, that there is NO other solution, but to code my own. From this idea, I built this jQuery plugin, called kvSmoothTransition.

It works like I originally wanted and we have used it on many sites, our company has created. Although its not always plug-n-play, because browsers are different and it matters on your HTML structure and CSS correction to keep the overlay in the right place. If you have any problem with placement, let me know, I can easily find the problem. Usually its weakened base-HTML structure.

Download

You can get all the source code at: https://github.com/kallevaravas/kvSmoothTransition
Or see the demo first: http://jsfiddle.net/hobobne/e87q8/12/

Usage

Download the code and implement it to your <head> section.
<script type="text/javascript" src="jquery.kvSmoothTransition.js"></script>
Make an example button:
<div id="example-1">Example 1</div>
Add some css to your example button:
#example-1 {padding: 5px; display: inline-block; cursor: pointer; border: 2px dotted red;}
#example-1.hover{border: 2px solid black;}

And now trigger the plugin to your element like this (I like the triggers to be in the footer):
$('#example-1').kvSmoothTransition();
So all in all, thats how you should get a perfect fade transition over your elements.

Comments