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

Above is my jquery code for a simple jquery slideshow

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>

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?

Answer 1

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.

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