JS+jQuery点击后元素0.5秒从红变白失效？新手求助

数据老陈

2026-11-8

代码失效的核心原因与修正方案

原有代码的两处关键错误

jQuery.css()方法不支持传入第三个回调参数
你当前写法中传给.css()的匿名回调，会被jQuery直接忽略——.css()是同步执行的方法，设计上就没有完成回调的逻辑，只有前两个参数（样式名、样式值）会被正常处理。
.delay()对直接修改样式的操作无任何延时效果
jQuery的.delay()仅作用于内部动画队列，也就是animate、fadeOut、slideUp这类自带异步流程的动画方法。同步直接修改样式的.css()不会进入这个队列，因此写在后面的.delay()完全不生效。
另外你写的延时值0050是带前导零的数字，JS会按八进制规则解析，哪怕delay逻辑生效，实际延时时长也只有40毫秒，和目标的0.5秒（500毫秒）差距极大。

setTimeout实现目标效果的正确写法

setTimeout是JS原生提供的延时执行API，会将指定代码延后到设定的毫秒数后执行，不会阻塞当前页面流程。
替换成以下代码即可实现点击按钮后先红、0.5秒后切白的效果：

$("#go").click(function () {
    // 立即设置#red为红色背景
    $("#red").css("background-color", "red");
    // 500毫秒（0.5秒）后将背景切换为白色
    setTimeout(() => {
        $("#red").css("background-color", "white");
    }, 500);
});