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

Question

我正在使用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/