Question

I am trying to create an infinite scroll of elements, and haven’t found a plugin that was sufficiently lightweight/capable enough, so I’m trying to create my own.

So far it is working swimmingly, except for a slight jerkiness in the animation when I remove the first element and append it to the end of the parent. The example I’ve tossed up also has an issue where the elements lose their padding, for some reason, but that is not occurring in my actual code…

Fiddle:
http://jsfiddle.net/WtFWy/

Using the sample markup:

<section id="photos" class="bg-transparent-black">
    <div class="red"></div>
    <div class="blue"></div>
    <div class="green"></div>
</section>​

#photos{
    position:absolute;
    bottom:1em;
    width:100px;
    height:225px;
    padding:3px;
    overflow:hidden;
    white-space:nowrap;
}
#photos div{
    height:100%;
    width:50px;
    padding:3px;
    display:inline-block;
    position:relative;
    border:1px solid black;
}
.red{background:red;}
.blue{background:blue;}
.green{background:green;}

​
And JavaScript:

scrollImages = function(){
                var photoArea = $('#photos');
                var children = photoArea.children();
                var firstChild = $(children[0])
                var firstOffset=firstChild.offset();
                if(document.elementLeft === false){
                    document.elementLeft = firstOffset.left;
                }
                if(document.elementWidth === false){
                    document.elementWidth=firstChild.outerWidth(true);
                }
                if(firstOffset.left < 0 && (Math.abs(firstOffset.left) > Math.abs(document.elementWidth))){
                    photoArea.append(firstChild);
                    firstChild.css('margin-left', 0 + 'px')
                    children = photoArea.children();
                    firstChild = $(children[0])
                    firstOffset=firstChild.offset();
                    document.elementLeft = firstOffset.left;
                    document.elementWidth=firstChild.outerWidth(true);
                }else{

                }
                document.elementLeft -= 1;
                firstChild.css('margin-left', document.elementLeft + 'px');
                t = setTimeout(scrollImages, 100);

            }
            document.elementLeft = false;
            document.elementWidth = false;
            var t = setTimeout(scrollImages, 500);
            $('#photos').mouseover(function(){clearTimeout(t)});
            $('#photos').mouseout(function(){scrollImages()})
        });

​

Answer 1

If you remove the padding: 3px from #photos the animation works properly.