Papermashup

Subscribe


Tweets


"RT @bethgordon: .@Tesco Please rethink archaic 'Approved by Mums'. Pretty sure it's not just mothers who make childcare decisions. https://…"

@ashleyford 1 day ago

"Is there ever a time that @DFS doesn't have a sale on?"

@ashleyford 5 days ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Papermashup

Animate through a set of list items with jQuery

Loop through list items and animate the font size

AshleyAshley

To start with lets have a brief explanation as to what we’re going to be doing. We have a set of items in a list, and we want to iterate though the list increasing and decreasing the font size. Here’s how it’s done.

The Code

Firstly we setup three variables that are used in the function, notice that we’re chaining the variables instead of declaring ‘var’ each time which is the optimal way of declaring multiple vars in jQuery. You can adjust the delay and animate values to suit your needs. We then loop through each list item using the eq(); method which allows us to select which list item to animate, you can see we’re passing the variable ‘i’ to this method which is increased towards the bottom of the script. Within the loop we finally call the function again to start the process again.



$(document).ready(function() {

var i = 0,
delay = 2000,
animate = 400;
function animateList(){
var imax = $("ul#list li").length -1;
$("ul#list li:eq(" + i + ")")
.animate({"fontSize" : "80px"}, animate)
.animate({"fontSize" : "80px"}, delay)
.animate({"fontSize" : "30px"}, animate, function(){

(i == imax) ? i=0 : i++;
animateList();
});

};

animateList();
});

The HTML



  • Advertising
  • Art
  • Automotive
  • Business
  • Celebrity

download

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 4
  • Enamul Hoq
    Posted on

    Enamul Hoq Enamul Hoq

    Reply Author

    i have understood it’s really great post
    Thanks


  • Andrea
    Posted on

    Andrea Andrea

    Reply Author

    FYI… When I clicked the download button it downloaded a zip file with just one PHP file. I did not open it!


  • Mike Jones
    Posted on

    Mike Jones Mike Jones

    Reply Author

    Why not just loop the ?


    • Mike Jones
      Posted on

      Mike Jones Mike Jones

      Reply Author

      loop the unoredered list.. **correction