重写Jquery fadeIn（）以使用CSS3过渡

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

有没有办法只重写JQuery fadeIn（）和fadeOut（）函数，以便在浏览器支持时使用CSS3 Transitions。

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.

我正在为所有其他动画使用jquery转换，我对Jquery的fadeIn和fadeOut函数更为舒服，但是它们运行得不好。

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

谢谢

2 个解决方案

#1

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

如果你想用jQuery Transit替换jQuery的fadeIn和fadeOut函数，你可以这样做：

$.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.

它并不完美，但您可以根据自己的喜好进行调整。

#2

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

看看这个插件。它可能对你有所帮助。