<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> li { width: 200px; height: 200px; margin: 20px; float: left; list-style: none; text-align: center; font: 50px/200px 'simsun'; background-color: pink; } </style> <script src="jquery-3.4.1.js"></script> <script> $(document).ready(function () { $('ul li').each(function (index, el) { $(el).css('opacity', (index+1)/10); }) }) </script> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </body> </html>
- demo 效果：
