jQuery UI的高亮效果可以应用于表单文本输入吗?

时间:2018-05-08 16:58:54

标签: javascript jquery jquery-ui

想知道jQuery UI的“突出显示”效果是否可用于表单文本输入。我想为背景颜色设置动画以指示字段已成功更新(单个字段,由Ajax成功事件触发的动画)。

1 个答案:

答案 0 :(得分:1)

您可以使用Jquery动画功能。首先使用动画绿色更改文本框的背景颜色以通知用户已成功保存的内容然后您可以再次将其简化为原始颜色。您可以在ajax成功函数中编写此代码。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>highlight demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  <style>
  #toggle {
    background: #fff;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
 
<p>Click anywhere to toggle the box.</p>
<input id="input-animate">
 
<script>
$( document ).click(function() {
  $( "#input-animate" ).animate({
          backgroundColor: "#009900",
          easing: "easein"
        }, 1500 , function(){
          $( "#input-animate" ).animate({
          backgroundColor: "#fff",
        }, 500)
        })
});
</script>
 
</body>
</html>