JQuery / WebKit / CSS transitions for cross browser panel animation

As an avid user of JQuery I was alarmed when on the admin panel on iOS开发者_高级运维 effects such as slide were slow and jerky unlike native iOS software.

I've found several mobile libraries including JQuery mobile and JQtouch. Neither however provide cross browser support.

Is their a way of having my existing JQuery effects default to a mobile version if it detects an iOS browser. And would it be possible for a brief explanation of how it works.

Many Thanks,

Marvellous

I use code like this:

speed = 500;

var vP = "";
var transitionEnd = "transitionEnd";
if ($.browser.webkit) {
    vP = "-webkit-";
    transitionEnd = "webkitTransitionEnd";
} else if ($.browser.msie) {
    vP = "-ms-";
} else if ($.browser.mozilla) {
    vP = "-moz-";
    transitionEnd = "transitionend";
} else if ($.browser.opera) {
    vP = "-o-";
    transitionEnd = "oTransitionEnd";
}   

function animate(object, cssProperties, callback, ms) {
    if (!ms) {
        ms = speed;
    }

    if (Modernizr.csstransitions) {
        object.css(vP+"transition", "all "+ms+"ms ease-in-out");

        object.css(cssProperties);

        if ($.isFunction(callback)) {

            object.bind(transitionEnd,function(){
                object.unbind(transitionEnd);
                callback();
            });

        }

    } else {
        if ($.isFunction(callback)) {       
            object.animate(cssProperties, ms, callback);
        } else {
            object.animate(cssProperties, ms);          
        }
    }
}

Then for simple cases:

animate($("#someID"),{"left":"100px"});

or for complex ones that need a vendor prefix:

var cssArgs = {};
cssArgs[vP+"transform"] = "translate(100px,0px)";

animate($("#someID"),cssArgs);

If I'm doing some sliding, the I'd recommend using transform3d and a translate of say (100px,0,0). On iOS that will be hardware accelerated.

I use Modernizr to check what I can do, with something like this:

function slide(gallery_chunk, sliderWidth) {
    if (Modernizr.csstransforms3d && Modernizr.csstransitions) {
        var cssArgs = {};
        cssArgs[vP+"transform"] = "translate3d("+gallery_chunk*-sliderWidth+"px,0px,0px)";

        animate($("#gallery_content #thumbnails"),cssArgs);
    } else if (Modernizr.csstransforms && Modernizr.csstransitions) {
        var cssArgs = {};
        cssArgs[vP+"transform"] = "translate("+gallery_chunk*-sliderWidth+"px,0px)";

        animate($("#gallery_content #thumbnails"),cssArgs);
    } else {
        animate($("#gallery_content #thumbnails"),{"left":gallery_chunk*-sliderWidth+"px"});            
    }   
}

That example is from an image slider, so I'm sending it the width and the chunk (i.e. page 0,1 or 2).

Hopefully that should give you some ideas!

I'm not aware of a super-easy way to do this. But you could use modernizr to figure out if the browser is css-transition friendly, and then do something like this:

function slideMeUp(elementID) {
    if (Modernizr.csstransitions) {
        $(elementID).removeClass('slidDown').addClass('slidUp');
    } else {
        $(elementID).slideUp(500);
    }
}

And then the magic would take place in the css, which gets a bit redundant, but ought to do the trick. The benefit of using the transition-transform-scale properties is that it works REALLY smoothly on iOS.

.sliders  {
  -moz-transition: -moz-transform 0.5s ease-out;  /* FF4+ */
  -o-transition: -o-transform 0.5s ease-out;  /* Opera 10.5+ */
  -webkit-transition: -webkit-transform 0.5s ease-out;  /* Saf3.2+, Chrome */
  -webkit-transform-origin: 50% 0%;  /* halfway across, at the top */
  -moz-transform-origin: 50% 0%;  /* halfway across, at the top */
  -o-transform-origin: 50% 0%;  /* halfway across, at the top */
  transition: transform 0.5s ease-out;  
  transform-origin: 50% 0%;  /* halfway across, at the top */
}
.slidUp {
    -webkit-transform: scale(1,0);  /* full width, zero height */
    -moz-transform: scale(1,0);  /* full width, zero height */
    -o-transform: scale(1,0);  /* full width, zero height */
    transform: scale(1,0);  /* full width, zero height */
}

.slidDown {
    -webkit-transform: scale(1,1);  /* full width, full height */
    -moz-transform: scale(1,1);  /* full width, full height */
    -o-transform: scale(1,1);  /* full width, full height */
    transform: scale(1,1);  /* full width, full height */
}