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

有没有办法只重写JQuery fadeIn()和fadeOut()函数,以便在浏览器支持时使用CSS3 Transitions.

我正在为所有其他动画使用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
}

}

谢谢

最佳答案

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

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