如何在IPAD上优化jquery fadeOut动画 [英] How do I optimise jquery fadeOut animation on IPAD

问题描述

$('#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代码

Above is my jquery code for a simple jquery slideshow

相关的html类似于：

And the associated html is something like:

<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上效果确实不稳定。我知道如何让动画像桌面版一样流畅？

This works perfectly in desktop browsers, but on IPAD the effect is really choppy. Any idea how can I make the animation as smooth as in the desktop versions?

推荐答案

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

I would use CSS transitions and addClass() rather than fadeOut. In IE you'll just get a straight hide/show effect, but in all other modern browsers CSS opacity fades will be smoother and faster.

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

Check out this JSfiddle to see my approach in action: 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动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！