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

Question

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

在这个间隔示例中，一切正常。

$(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() 函数时的注释。

Answer 1

http://api.jquery.com/delay/

延迟与使用其内部动画队列的 jquery 函数相关。它并不能替代所有事情的超时。鉴于您的情况，我相信由于 css() 不使用动画队列，它只是简单地应用 css 语句，速度太快，以至于您看不到任何效果。