JQuery - Scrolling list, increase font-size gradually

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

This is basically the action I want, but I also want to add a fadeout to the top item as the slideUp is performed, AND the font size of the following item to gradually increase in size as it is moved up to top position. I haven't been able to figure out how unfortunately.

Answer 1

I know I am a little bit late, but you can always try this as well

$(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>

If you do like this you get a much smother scroll

    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>