Блог

Главная - Вопросы по программированию - Перемещение элементов списка ul по горизонтали

Перемещение элементов списка ul по горизонтали

#javascript #jquery #jquery-ui

#javascript #jquery #jquery-пользовательский интерфейс

Вопрос:

У меня есть эта функция:

     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 и текст, который я хочу добавить, после добавления текста он перемещает новый элемент сверху вниз. он также удаляет последний элемент каждый раз, когда добавляется новый элемент. Я хочу, чтобы он работал горизонтально, поэтому вместо скольжения сверху сдвиньте его справа налево, но не знаю, как это изменить.

Комментарии:

1. Psst. Покажите соответствующий источник HTML для целей тестирования.

2. Вот пример скрипки. Я чувствую, что есть гораздо более простые способы сделать это, поэтому оставлю это другим для решения — jsfiddle.net/mrtsherman/ML7v5

Ответ №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'
                });
            });
        });
    });
}
Метки: