JQuery - scroll 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 that I want, but I also want to add a fadeout to the top element when executing the slide room, and the font size of the next element gradually increases as it moves to the top position, I could not figure out how much to unfortunately.

Answer 1

I know I'm a little late, but you can always try this.

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

Run codeHide result

If you do this, you will get a scroll with lots of smoke

    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>

Run codeHide result

Answer 2

From your question, I realized that you want to gradually increase 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>

Hide result

Answer 3

How can I make the top element as slippery as the rest, instead of remaining stationary in the background to make the slide smoother?

Quite a lot: http://buildinternet.com/project/totem/ Except for calling setInterval, rather than clicking on the following