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');  
        }
    }
});

如何在IPAD上优化jquery fadeOut动画

1 个答案: