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

将height替换为width，将top替换为right，将bottom替换为left。完成这些更换后，保存新功能并执行 小提琴：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'
                });
            });
        });
    });
}

水平滑动ul列表元素

1 个答案: