jquery - 如何在 IPAD 上优化 jquery fadeOut 动画

Question

$('#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 类似于:

<div id="scrollbar1">
                        <img src="images/intro/intro3_1.jpg">
                        <img src="images/intro/intro3_2.jpg">
                        <img src="images/intro/intro3_3.jpg">
                        <img src="images/intro/intro3_4.jpg">
                        <img src="images/intro/intro3_5.jpg">
                        <img src="images/intro/intro3_6.jpg">
                        <img src="images/intro/intro3_7.jpg">
                    </div>

这在桌面浏览器中效果很好，但在 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');  
        }
    }
});