重写Jquery fadeIn()以使用CSS3转换

Question

有没有一种方法可以在浏览器支持的情况下重写JQuery fadeIn（）和fadeOut（）函数以使用CSS3转换。

我对所有其他动画都使用jquery transit，我对jquery的fadeIn和fadeOut函数更满意，但它们运行得不好。

这是我正在上工作的网站的链接

例如；

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演示

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

Answer 2

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