Rewrite Jquery fadeIn() to use CSS3 transitions

Question

Is there a way to just rewrite the JQuery fadeIn() and fadeOut() functions to use CSS3 Transitions when the browser supports it.

I'm using jquery transit for all other animations and I'm more comfortable with the fadeIn and fadeOut functions of Jquery but they don't run as well.

Here's a link to the site I'm working on

eg;

if(CSS3TransitionsAvailable){

$.fn.fadeIn() = function(this, speed, callback){

//Fade this in Using CSS3 Transistions
}

}

Thanks

Answer 1

If you want to replace jQuery's fadeIn and fadeOut functions with jQuery Transit, you could do something like this:

$.fn.fadeOut = function(speed, callback)
{
    var transitionSpeed = typeof (speed) == "undefined" ? 1000 : speed;    
    $(this).transition({opacity: 0 }, transitionSpeed, callback);

};

$.fn.fadeIn = function(speed, callback)
{
    var transitionSpeed = typeof (speed) == "undefined" ? 1000 : speed;    
    $(this).transition({opacity: 1 }, transitionSpeed, callback);

};

$("div").on("click", function () 
{
    //Fade out for 4 seconds, then fade in for 6 seconds
    $(this).fadeOut(4000, myCallBackFunction);
});

function myCallBackFunction () 
{
        $(this).fadeIn(6000);

}

JS Fiddle Demo

It's not perfect, but you can tweak it to your liking.