开发者

Can jQuery's fadeIn and fadeOut be tweeked to use CSS transitions?

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.

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.


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

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


Instead of using .fadeIn() and .fadeOut(), use .animate() and you can perform all the custom css animations you like!

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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜