Question

我想根据点击的按钮上下滚动新闻文章列表

如果可能，我想调整这种动画方式：

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。

Answer 1

此处：http://jsfiddle.net/sDedY/13/

我写的是刮痕。正如你注意到我已经在css文件中直接添加了css，它比通过jquery添加css更好，特别是对于未来的mainenance / decorateion等。但是我没有花太多时间用于不同的caluclations。这是一个蓝图，我想，你可以修改并使其更好，比如制作顶部和底部组合使功能小或类似的东西，我再也没有时间了......所以再次：重做基于css的计算你自己修改它！

编辑：关于变量高度，您需要记住我还没有完成整个功能。编写此函数的下一步是自动计算margin-top和top而不是手动输入它们，这非常简单。所需要的只是传递一个变量来获取li元素的位置和尺寸，然后将它们传递给我们的代码。

Answer 2

我改变了几行代码：

var el = $('#scroller' + id);至var el = $('#' + id);

和

smoothAdd('scrollUp', 'A new item');至smoothAdd('scroller', 'A new item');

请参阅http://jsfiddle.net/nCWAP/

可滚动的ul列表从与类的链接上下

2 个答案: