我通过jQuery写了一个测试动画,但运行很卡.(补充测试代码)

半仙

//点击黄色部分,会弹出一个红框.再次点击花色部分红框消失.

$('#doc').text(navigator.userAgent.toLowerCase());

var leftDiv = $('#left');

var w = leftDiv.width();

$('#doc').on('click', function(event) {

if(leftDiv.is('.show')){

leftDiv.removeClass('show');

leftDiv.animate({

left:-w

},500);

return false;

}

leftDiv.css('left',-w).addClass('show');

leftDiv.animate({

left:0

},500);

return false;

});

非常简单的一段代码. 在一般的手机浏览器中运行完全没有问题. 但打包成APP后. 动画很卡. 这是什么问题造成的? 有办法优化吗?

二个文件,一个是浏览器中测试用的html,一个是测试用的APP

jq动画测试.rar 下载附件

2014-12-19 15:24上传620.02 KB下载次数: 1325

2014-12-19 15:24 上传

点击文件名下载附件
二个文件,一个是浏览器中测试用的html,一个是测试用的APP

lalalalalala

效果用css3写，比如你要动画执行500ms，改变的是left的值,就给那个元素加上
-webkit-transition: left .5s ease;
transition: left .5s ease;
然后直接改变left的值就行了

半仙

已验证 , 还是卡.但万分感谢!

用 transform: 'translate3d(200px, 0px, 0px)' 效果还好.
哎,看来真要仔细看遍css3了.

Alon

半仙 发表于 2014-12-19 17:36
已验证 , 还是卡.但万分感谢!

用 transform: 'translate3d(200px, 0px, 0px)' 效果还好.

CSS3启用硬件加速的，效果比较好，能用CSS3尽量用CSS，没办法才用JS实现