話不多說,直接貼程式碼
<!-- 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)
效果圖:
以上是實用的JQuery 列隊動畫 demo的詳細內容。更多資訊請關注PHP中文網其他相關文章!