重写 Jquery fadeIn() 以使用 CSS3 过渡

Question

有没有办法只重写 JQuery 的 fadeIn() 和 fadeOut() 函数以在浏览器支持的情况下使用 CSS3 过渡。

我对所有其他动画都使用了 jquery 传输，我对 Jquery 的 fadeIn 和 fadeOut 功能更满意，但它们的运行效果不佳。

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

例如;

if(CSS3TransitionsAvailable){

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

//Fade this in Using CSS3 Transistions
}

}

谢谢

Answer 1

如果你想用 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

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

Answer 2

看看this 插件。它可能会对你有所帮助。