如何在IPAD上优化jquery fadeOut动画

$('#scrollbar1').css('width','1000px'); $('#scrollbar1 img').css('width','980px'); setInterval(function(){ var ff = $('#scrollbar1 img:first'); var ll = $('#scrollbar1 img:last'); var nn = ll.prev(); nn.show(); ll.fadeOut(1000,function(){ ff.before(ll); }); },2000); 

上面是我的简单jquery幻灯片的jquery代码

相关的html类似于：

这在桌面浏览器中完美运行，但在IPAD上，效果确实不稳定。 任何想法如何使动画像桌面版一样流畅？

Answer 1

我会使用CSS过渡和addClass()而不是fadeOut。 在IE中，你只会获得直接的隐藏/显示效果，但在所有其他现代浏览器中，CSS不透明度淡化将更加平滑和快速。

看看这个JSfiddle看看我的方法： http ： //jsfiddle.net/GFmM8/47/

 #scrollbar1 img { position: absolute; opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } #scrollbar1 img.current { opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; } $(document).ready(function(){ var interval = setInterval(fader, 1000); function fader() { var $img = $('img'), imglength = $img.size(), $imgcur = $('img.current'), imgindex = $imgcur.index() + 1, $imgnext = $imgcur.next('img'); $imgcur.removeClass('current'); if(imglength - imgindex == 0) { $('img:first').addClass('current'); } else { $imgnext.addClass('current'); } } });