跨浏览器面板动画的JQuery / WebKit / CSS转换

|| 作为JQuery的狂热用户,与本地iOS软件不同,在iOS上的管理面板上对幻灯片等幻灯片效果缓慢而生涩的情况感到震惊。 我发现了几个移动库,包括JQuery mobile和JQtouch。但是两者都不提供跨浏览器支持。 如果检测到iOS浏览器,是否可以将我现有的JQuery效果默认为移动版本?并可能对其工作方式进行简要说明。 非常感谢, 奇妙     
已邀请:
我使用这样的代码:
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);          
        }
    }
}
那么对于简单的情况:
animate($(\"#someID\"),{\"left\":\"100px\"});
或需要供应商前缀的复杂产品:
var cssArgs = {};
cssArgs[vP+\"transform\"] = \"translate(100px,0px)\";

animate($(\"#someID\"),cssArgs);
如果我要进行一些滑动,则建议使用transform3d和诸如(100px,0,0)的转换。在iOS上,它将硬件加速。 我使用Modernizr来检查我能做什么,就像这样:
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\"});            
    }   
}
该示例来自图像滑块,因此我要向其发送宽度和数据块(即第0、1或2页)。 希望那会给你一些想法!     
我不知道这样做的超级简单方法。但是您可以使用modernizr来确定浏览器是否支持css转换,然后执行以下操作:
function slideMeUp(elementID) {
    if (Modernizr.csstransitions) {
        $(elementID).removeClass(\'slidDown\').addClass(\'slidUp\');
    } else {
        $(elementID).slideUp(500);
    }
}
然后魔术将在css中发生,这有点多余,但是应该做到这一点。使用transition-transform-scale属性的好处是它在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 */
}
    

要回复问题请先登录注册