可以使用jQuery的fadeIn和fadeOut来使用CSS转换吗？

我正在使用jQuery进行动画制作。 其中一部分使用.fadeIn和.fadeOut API。 除iOS设备外，这种方法几乎无处不在。 在iOS设备上，淡入淡出看起来不稳定，一般都不光滑，即使在1或2秒的淡入淡出。

有没有办法重写或创建一个使用CSS过渡的类似函数，因为它们在iOS上看起来比jQuery使用的方法更平滑。

Answer 1

这是使用我编码的CSS3过渡的最佳fadeIn / fadeOut。 它支持所有签名。 到目前为止，没有发现任何错误。 随意重复使用

var hasCSSTransitions = Modernizr.csstransitions; hasCSSTransitions && (function ($) { $.fn.fadeIn = function (speed, easing, callback) { return this.filter(function (i, elem) { return $.css(elem, 'display') === 'none' || !$.contains(elem.ownerDocument, elem); }) .css('opacity', 0) .show() .end() .transition({ opacity: 1 }, speed, easing, callback); }; $.fn.fadeOut = function (speed, easing, callback) { var newCallback = function () { $(this).hide(); }; // Account for `.fadeOut(callback)`. if (typeof speed === 'function') { callback = speed; speed = undefined; } // Account for `.fadeOut(options)`. if (typeof speed === 'object' && typeof speed.complete === 'function') { callback = speed.complete; delete speed.complete; } // Account for `.fadeOut(duration, callback)`. if (typeof easing === 'function') { callback = easing; easing = undefined; } if (typeof callback === 'function') { newCallback = function () { $(this).hide(); callback.apply(this, arguments); }; } return this.transition({ opacity: 0 }, speed, easing, newCallback); }; }(jQuery)); 

这需要Rico的jQuery Transit插件。 它只是一个包含类似签名而不是animate（）的包装器，但是对于使用css3。

Answer 2

而不是使用.fadeIn（）和.fadeOut（），使用.animate（），你可以执行你喜欢的所有自定义CSS动画！

http://api.jquery.com/animate/