Geek asks and answers

Rewrite jQuery fadeIn () to use CSS3 transitions

Is there a way to simply rewrite the jQuery fadeIn () and fadeOut () functions to use CSS3 transitions when the browser supports it.

I use the jquery transition for all other animations, and I am more comfortable working with the fadeIn and fadeOut jQuery functions, but they also do not start.

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

eg,

if(CSS3TransitionsAvailable){

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

//Fade this in Using CSS3 Transistions
}

}

thank

+5
source share
2 answers

If you want to replace the jQuery fadeIn and fadeOut functions with jQuery Transit, you can 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

This is not ideal, but you can customize it to your liking.

+3
source

Take a look at this plugin. It can help you.

+1
source

More articles:


All Articles