javascript - 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);
});

这基本上是我想要的 Action ，但我还想在执行 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>