Cycle Through a List
For example, Cycle Through a List...
Demo
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
- At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque
HTML
<ul id="cyclelist"> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> <li>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque </li> <li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque </li> </ul>
CSS
<style> #cyclelist { background-color: #037cd5; color:#FFF; width:200px; height:200px; position:relative; overflow:hidden; padding-left:0; /* Demo purposes only */ } #cyclelist li { font-size:15px; line-height:1.5em; padding:20px; position:absolute; opacity:0; list-style:none; /* Demo purposes only */ } </style>
Javascript
// Cycle Through a List $(function(){ var z = 0; var delay = 2000; // delay between cycles list items function cycle(){ var cyclelSlides = $("#cyclelist li").length -1; $("#cyclelist li:eq(" + z + ")") .animate({"opacity" : "1"} ,400) .animate({"opacity" : "1"}, delay) .animate({"opacity" : "0"}, 400, function(){ (z == cyclelSlides) ? z=0 : z++; cycle(); }); }; cycle(); })