Javascript .css在JQuery函数链中不起作用

我编写了一个函数，从网站上的名称字段中提取一个值，并使用它自动填充电子邮件字段。此外，我添加了一个黄色的快速闪烁，向用户显示该字段已自动更新

在这个空白的例子中，一切都很好

$(function() {
  $("#name").on("change", function(){

  let name = $(this).val();

  let spIndex = name.indexOf(" ");

  let email = name.substr(0, spIndex) + name.substr(spIndex+1, 1) + "@example.com";

  $("#email").val(email.toLowerCase());

  $("#email").css({
  "transition": "background-color 0.5s",
  "background-color": "#f9ff60"
  });

  setTimeout(function(){$("#email").css({"background-color":"#fff"});}, 400);

  });

});

我只是在尝试链接函数时才注意到这个问题（是的，我知道第一种方法更有意义，我只是想尝试一下）。由于某些原因，

.css（）

函数没有任何作用

$(function() {
  $("#name").on("change", function() {
    $("#email").val(($(this).val().substr(0, $(this).val().indexOf(" ")) + 
      $(this).val().substr($(this).val().indexOf(" ")+1, 1) + "@example.com").toLowerCase())
      .css({
        "transition": "background-color: 500",
        "background-color": "#f9ff60"
      })
     .delay(400)
     .css({
       "background-color": "#fff"
     });
  });
});

此外，我还尝试在链的末尾添加另一个

.val（）

函数，以检查它是否一直有效，它确实有效，但css没有改变

---

因为我知道我可以用第一种方法来做，所以我不是要求使用它，而是为了将来的注意，如果我将来使用

.css（）

函数。

根据JQuery Effects API，您可以找到一个选项来突出显示特定元素

通过在主JQuery脚本标记下链接JQuery UI：

<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

---

根据jqueryeffectsapi，您可以找到一个选项来突出显示特定元素

通过在主JQuery脚本标记下链接JQuery UI：

<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

延迟用于jquery的函数，这些函数使用它的内部动画队列。它并不能代替所有事情的超时。考虑到您的情况，我认为由于css（）不使用动画队列，因此它只是快速应用css语句，您看不到任何效果。

延迟用于jquery的函数，这些函数使用它的内部动画队列。它并不能代替所有事情的超时。考虑到您的情况，我认为由于css（）不使用动画队列，因此它只是快速应用css语句，您看不到任何效果