JQuery

Question

<div id="wrap">
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

$(document).ready(function() {
  function scroll() {
    $('#wrap ul li:first').slideUp(function() {
      $(this).show().parent().append(this);
    });
  }
  setInterval(scroll, 1000);
});

这基本上是我想要的动作，但我还想在执行 slideUp 时向顶部项目添加淡出效果，并在向上移动时逐渐增加以下项目的字体大小最高位置。不幸的是，我一直无法弄清楚。

Answer 1

根据你的问题，我了解到你想逐渐增加font-size。

使用siblings()

$('#wrap ul li:first').slideUp(function() {
      //Append item
      $(this).show().parent().append(this);
      //Change css for first item.
      $('#wrap ul li:eq(0)')
        .css('font-size', '42px')
        .siblings()      // siblings will give others
        .css('font-size', '36px');
});

$(document).ready(function() {
  function scroll() {
    $('#wrap ul li:first').slideUp(function() {
      $(this).show().parent().append(this);
      $('#wrap ul li:eq(0)')
           .css('font-size', '42px')
           .siblings()
           .css('font-size', '36px');
    });
  }
  setInterval(scroll, 1000);
});

li{
 font-size: 36px  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

Answer 2

如何让最上面的项目也像其他项目一样向上滑动，而不是固定在背景中以使幻灯片看起来更无缝？

大致如下： http://buildinternet.com/project/totem/ 除了由 setInterval 调用而不是单击 next

Answer 3

我知道我有点晚了，但你也可以试试这个

$(document).ready(function() {
  var size = ['40px', '30px', '20px', '10px']

  function scroll() {
    renderSize();
    $('#wrap ul li:first').fadeOut('slow', function() {
      $(this).slideUp(function() {
        $(this).show().parent().append(this);
        renderSize()
      });
    })
  }

  function renderSize() {
    $('#wrap ul li').each(function(i) {
      $(this).css('font-size', size[i])
    })
  }
  
  renderSize()
  setInterval(scroll, 1000);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</div>

如果你这样做，你会得到一个令人窒息的卷轴

    var size = [40, 30, 20, 10]

    function renderSize() {
      $('#wrap ul li').each(function(i) {
        $(this).css('font-size', size[i])
      })
    }

    function scroll() {
      $('#wrap ul li:first').animate({
        fontSize: "0"
      }, 500, function() {
        $(this).show().parent().append(this);
      }).animate({
        fontSize: size[3] + "px"
      }, 500)

      $('#wrap ul li').each(function(i) {
        i++;
        reSize(i);
      })
    }

    function reSize(i) {
      i++;
      var j = i - 2;
      $('#wrap ul li:nth-child(' + i + ')').animate({
        fontSize: size[j] + "px",
      }, 500)
    }

    $(document).ready(function() {
      renderSize()
      setInterval(scroll, 1000);
    })

ul {
  height: 110px;
  overflow: hidden;
  list-style-type: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</div>

JQuery - 滚动列表，逐渐增加字体大小

JQuery - Scrolling list, increase font-size gradually

javascript

html

siblings

slideup