jQuery的fadeIn和fadeOut可以被调整以使用CSS转换吗？ [英] Can jQuery's fadeIn and fadeOut be tweeked to use CSS transitions?

问题描述

我使用jQuery的动画。其中一部分使用.fadeIn和.fadeOut API。这工作正常，除了在iOS设备上的每个地方。在iOS设备上，褪色看起来很乱，一般不光滑，甚至超过1或2秒。褪色。

I'm using jQuery for animations. Part of those use the .fadeIn and .fadeOut API. This works fine just about everywhere except on iOS devices. on iOS devices the fades look choppy and are generally not smooth at all, even over a 1 or 2 seconds fade.

有任何方法可以重写或创建类似的功能这将使用CSS转换，因为它们看起来在iOS上比jQuery使用的方法更加顺畅。

Is there any way to rewrite or create a similar function that would use CSS transitions as they seem to be much smoother on on iOS than the method jQuery uses.

推荐答案

这是最好的fadeIn / fadeOut使用CSS3转换我编码。它支持所有的签名。到目前为止，没有发现错误。随意重用

This is the best fadeIn/fadeOut using CSS3 transitions I've coded. It supports all of their signatures. So far, no bugs found. Feel free to reuse

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));

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

This requires jQuery Transit plugin from Rico. It's just a wrapper with a similar signature than animate() but for using css3.

这篇关于jQuery的fadeIn和fadeOut可以被调整以使用CSS转换吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！