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

使用.animate（）代替使用.fadeIn（）和.fadeOut（），您可以执行所有自定义的css动画！

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

可以将jQuery fadeIn和fadeOut调整为使用CSS转换吗？

2 个答案: