Question

I have a project on jsFiddle:

jsFiddle Link

JavaScript:

var scroller = function() {
    $('#holder div').animate({
        left: ($t.attr('id') == 'prev' ? '-=' : '+=') + 3
    }, 10, 'linear', function() {
        if ($(this).position().left < -$('li:first-child', this).width()) {
            w = $('li:first-child', this).totalWidth();
            $('li:first-child', this).appendTo('ul', this);
            $(this).css('left', $(this).position().left + w);
        }
    });
};

$.fn.extend({
    totalWidth: function() {
        return this.outerWidth() + parseInt(this.css('margin-left'), 10) + parseInt(this.css('margin-right'), 10);
    }
});
wdth = 0;
$('#marquee ul li').each(function() {
    wdth += $(this).totalWidth();
});
$('#holder div').width(wdth);
var to;
$('#prev, #next').css('top', ($('#marquee').outerHeight() - $('#prev').outerHeight()) / 2).live('mousedown mouseup', function(e) {
    $t = $(this);
    if (e.type == 'mousedown') {
        to = setInterval(scroller, 15);
    }
    else {
        clearInterval(to);
    }
});

HTML:

<div id="marquee">
    <div id="prev"><</div>
    <div id="next">></div>
    <div id="holder">
        <div>
        <ul>
            <li>Part 1</li>
            <li>Part 2</li>
            <li>Part 3</li>
            <li>Part 4</li>
            <li>Part 5</li>
            <li>Part 6</li>
            <li>Part 7</li>
            <li>Part 8</li>
            <li>Part 9</li>
            <li>Part 10</li>
        </ul>
    </div>
    </div>
</div>

CSS:

* {
    font-family: verdana;
    font-size: 12px;
}
#marquee {
    top: 50px;
    position: relative;
    width: 80%;
    height: 34px;
    background-color: #CCC;
    margin: 0 auto;
    padding: 0;
}
#holder {
    overflow: hidden;
position: absolute;
    left: 5px;
    right: 5px;
    top: 5px;
    bottom: 5px;
}
#holder div {
    position: absolute;
}
#marquee ul li {
    display: inline-block;
    float: left;
    margin-left: 5px;
    padding: 5px 7px;
    background-color: #555;
}
#marquee ul li:nth-child(2n+1) {
background-color: #888;
}
#marquee ul li:first-child {
    margin-left: 0;
}
#prev, #next {
    position: absolute;
    top: 10px;
    background-color: #66F;
    padding: 2px;
    cursor: pointer;
    z-index: 9002;
}
#prev {
    left: -13px;
    border-radius: 5px 0 0 5px;
}
#next {
    right : -13px;
    border-radius: 0 5px 5px 0;
}

what I am trying to achieve is a scrolling loop on mousedown, stopping on mouseup.

I have been able to make it scroll, and loop but it ‘jumps’ on every loop change.

Does anyone have any ideas?

---

I have edited the fiddle to remove the CSS rule, also edited the code slightly.

Originally when it scrolled left, it jumped back about 20px and this was made to seem worse by the CSS rule!

Also the animation goes on in 10ms but it loops every 15ms due to the fact that on mouseup the loop would continue for a bit.

The right does not loop because since I did not know how to do the left, I would not waste time making it scroll right erroneously when i could simply make it scroll correctly when it was ready.

I am not using a plugin because I want to learn how to do it myself (stubborn!)

Answer 1

Forked your fiddle and added code a) that eliminates jumpiness while scrolling and b) that checks and adds the first <li> to the end of the list (if there’s space) while scrolling right (next)

Check this fiddle: http://jsfiddle.net/CRy4Q/15/