Question

I have this function for adding a new item to the beginning of the list and removing the last one:

function addItem(id, text){
    var el = $('#' + id);
    var w = el.width();
    el.css({
        width:   w,
        overflow: 'hidden'
    });
    var ulPaddingLeft    = parseInt(el.css('padding-left'));
    var ulPaddingRight = parseInt(el.css('padding-right'));
    el.prepend('<li>' + text + '</li>');
    var first = $('li:first', el);
    var last  = $('li:last',  el);
    var fow = first.outerWidth();
    var widthDiff = fow - last.outerWidth();
    var oldMarginLeft = first.css('margin-Left');
    first.css({
        marginLeft: 0 - fow,
        position:  'relative',
        left:       0 - ulPaddingLeft
    });
    last.css('position', 'relative');
    el.animate({ width: w + widthDiff }, 1500);
    first.animate({ left: 0 }, 250, function() {
        first.animate({ marginLeft: oldMarginLeft }, 1000, function() {
            last.animate({ left: ulPaddingRight }, 250, function() {
                last.remove();

                el.css({
                    width:   'auto',
                    overflow: 'visible'
                });
            });
        });
    });
}

How can I make it work the other way around ? I want to add the item to the end and remove the first and also make it slide the other way around, like right to left.

Answer 1

Take a look at jQuery.append (and jQuery.prepend for beginning of list)