Not much to say, just post the code
<!-- css -->ul{ list-style: none; } li{ font-size: 25px; float: left; color:grey; position: relative; margin: 10px; opacity: 0; left: -200px; }<!-- html --><ul> <li>欢</li><li>迎</li><li>来</li><li>到</li><li>这</li><li>里</li></ul><!-- js -->$("li").last().animate({ opacity: '1', left: '200px' },400,function fn(){ $(this).prev().animate({ opacity: '1', left: '200px' },400,fn) }) setTimeout(function(){ $("li").last().animate({ opacity: '0', left: '400px' },400,function fn(){ $(this).prev().animate({ opacity: '0', left: '400px' },400,fn) }) },2500)
Rendering:
The above is the detailed content of Practical JQuery queue animation demo. For more information, please follow other related articles on the PHP Chinese website!