不借助 CSS3，用 jQuery 控制 div 旋转速度的方法与注意事项

可以使用 jQuery 的 `animate` 方法结合 `step` 回调函数来控制 `div` 旋转的速度，下面是一个示例代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery Rotate Animation</title> <style> #myDiv { width: 100px; height: 100px; background-color: blue; position: relative; } </style> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <div id="myDiv"></div> <button id="rotateButton">Rotate</button> <script> $(document).ready(function () { // 为按钮绑定点击事件 $('#rotateButton').click(function () { // 开始动画 $({ deg: 0 }).animate({ deg: 360 }, { // 动画持续时间，控制旋转速度 duration: 2000, step: function (now) { // 在每一步更新 div 的旋转角度 $('#myDiv').css({ transform: 'rotate(' + now + 'deg)' }); } }); }); }); </script> </body> </html> ``` 代码解释： 1. HTML 部分创建了一个 `div` 元素和一个按钮元素。 2. CSS 部分为 `div` 设置了宽度、高度和颜色。 3. jQuery 部分，当按钮被点击时，使用 `animate` 方法从 `0` 度旋转到 `360` 度。`duration` 参数用于控制动画的持续时间，即旋转的速度。`step` 回调函数在动画的每一步被调用，用于更新 `div` 的旋转角度。我在以往的开发过程中，碰到过以下几点需要格外小心处理的地方： 1. 确保引入的 jQuery 库版本与代码兼容，不同版本的 jQuery 可能存在一些方法或属性的差异。 2. 注意 `duration` 参数的单位是毫秒，设置时要根据实际需求调整合适的值，避免旋转速度过快或过慢。 3. 在使用 `transform` 属性时，不同浏览器可能存在兼容性问题，需要添加相应的浏览器前缀以确保在各浏览器中都能正常显示。 ######[AI写代码神器 | 581点数解答 | 2025-09-01 12:04:56]

服务商

更多选项

快捷项

自定义