简体   繁体   English

jQuery UI的突出显示效果可以应用于表单文本输入吗?

[英]Can jQuery UI’s highlight effect be applied to a form text input?

Wondering if jQuery UI's 'highlight' effect can be used on a form text input. 想知道jQuery UI的“突出显示”效果是否可用于表单文本输入。 I would like to animate the background colour to indicate a field was successfully updated (individual field, animation triggered by Ajax success event). 我想设置背景颜色的动画,以指示字段已成功更新(单个字段,由Ajax成功事件触发的动画)。

You can use Jquery animate function. 您可以使用Jquery动画功能。 First change the background color of text box using animate to green to notify user something has been saved successfully then you can ease it out to the original color again. 首先,使用动画将文本框的背景颜色更改为绿色,以通知用户已成功保存某些内容,然后可以将其重新设置为原始颜色。 You can write this code in your ajax success function. 您可以在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> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM