滑動UL列表元素水平

Question

我有這樣的功能：

function smoothAdd(id, text) 
{ 
    var el = $('#' + id); 

    var h = el.height(); 

    el.css({ 
     height: h, 
     overflow: 'hidden' 
    }); 

    var ulPaddingTop = parseInt(el.css('padding-top')); 
    var ulPaddingBottom = parseInt(el.css('padding-bottom')); 

    el.prepend('<li>' + text + '</li>'); 

    var first = $('li:first', el); 
    var last = $('li:last', el); 

    var foh = first.outerHeight(); 

    var heightDiff = foh - last.outerHeight(); 

    var oldMarginTop = first.css('margin-top'); 

    first.css({ 
     marginTop: 0 - foh, 
     position: 'relative', 
     top:  0 - ulPaddingTop 
    }); 

    last.css('position', 'relative'); 

    el.animate({ height: h + heightDiff }, 1500) 

    first.animate({ top: 0 }, 250, function() { 
     first.animate({ marginTop: oldMarginTop }, 1000, function() { 
      last.animate({ top: ulPaddingBottom }, 250, function() { 
       last.remove(); 

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

這需要在UL的ID，我想添加文本，將它添加幻燈片從頂部到底部的新元素後文。它也會刪除最後一個元素，每次添加一個新項目。我想使它水平工作，所以不是從頂部滑動，而是從右向左滑動，但不知道如何進行這種改變。

Answer 1

通過left通過width，top更換height通過right和bottom。完成這些替換後，保存新功能並執行。
小提琴：http://jsfiddle.net/uGkCq/

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