Блог

Я хочу прокручивать список новостных статей вверх и вниз в зависимости от того, какие кнопки нажаты

Я хотел адаптировать этот способ анимации, если это возможно:

 function smoothAdd(id, text)
{
    var el = $('#scroller'   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'
                });
            });
        });
    });
}

  $('.scrollUp').click(function() {
      smoothAdd('scrollUp', 'A new item');
  });
 

Пример здесь: http://www.fiveminuteargument.com/blog/scrolling-list

Мой HTML выглядит так:

   <ul id="scroller">
      <li class="current"><span>/</span><a href="#article1">News Article Title</a></li>
      <li><span>/</span><a href="#article2">News Article Title 2</a></li>
      <li><span>/</span><a href="#article3">News Article Title 3</a></li>
  </ul>
  <div class="btnWrap"><p><a href="#arrow" class="scrollUp">Scroll Up</a>
  <a href="#arrow" class="scrollDown">Scroll Up</a></p></div>
 

Может кто-нибудь указать мне правильное направление?

В основном поддерживайте стиль анимации, но сохраняйте его как определенный UL в соответствии с обычной каруселью.

Здесь : http://jsfiddle.net/sDedY/13 /

Я написал форму с нуля. как вы заметили, я добавил css непосредственно в файл css, это лучше, чем добавлять css через jquery, особенно для будущего обслуживания / оформления и т. Д., Но я не потратил много времени на разные вычисления. Я думаю, это план, который вы можете изменить и сделать намного лучше, например, объединить верх и низ, чтобы сделать функцию маленькой, или что-то в этом роде, у меня просто больше нет времени… итак, еще раз: повторите вычисления на основе css самостоятельно и измените его!

РЕДАКТИРОВАТЬ: что касается переменной высоты, вы должны иметь в виду, что я не доработал всю функцию целиком. следующим шагом в кодировании этой функции будет автоматическое вычисление margin-top и top, а не ввод их вручную, что довольно просто. все, что нужно, это передать переменную, чтобы получить положение и размеры элементов li, а затем передать их в наш код.

Я изменил несколько строк вашего кода:

var el = $('#scroller' id); Для var el = $('#' id);

и

smoothAdd('scrollUp', 'A new item'); Для smoothAdd('scroller', 'A new item');

видишь http://jsfiddle.net/nCWAP /

Я сделал немного более простое решение. Проверьте это здесь

Вам не нужно связываться ни с absolute тем relative , ни с top другим. Список имеет height as auto , поэтому он увеличивается / уменьшается в зависимости от высоты их li элементов

РЕДАКТИРОВАТЬ Теперь высота автоматически настраивается для отображения всех элементов.

Также поддерживает li элементы любой высоты.