1

用jquery高亮文本框字段边框，效果平滑。例如。当用户聚焦输入框时，字段的边框应该以平滑的效果突出显示。我知道它可以使用 css 的 focus 属性来完成，但我不想使用它，因为它不会产生平滑的效果。

例如参考： 1. youtube 的搜索框：http ://www.youtube.com/ 2. 99lime：http ://www.99lime.com/elements/#form-example

4

4 回答 4

2

您可以使用 CSS 过渡使效果平滑。

input {
    -webkit-transition: box-shadow .3s;
    transition: box-shadow .3s;
}
input:focus {
    box-shadow: 0px 0px 7px blue;
}

http://jsfiddle.net/ExplosionPIlls/Zn8eZ/

使用 jQuery 为 box-shadow 设置动画没有简单的方法——它需要一个插件。我想您可以将输入叠加在不可见的阴影存在之上并为其显示设置动画。

于 2013-04-10T05:11:06.293 回答
0

你可以这样做

  $('input[type="text"]').focus(function() {
   $(this).addClass("focus");
  });

   $('input[type="text"]').blur(function() {
   $(this).removeClass("focus");
  });

在这里查看演示... http://jsfiddle.net/d3TbF/

于 2013-04-10T05:14:43.313 回答
0

如果你需要 jQuery，你可以试试这个（包括 jQuery UI 库）：

jQuery(function($) {
    $("input").on('focus', function(e) {
        $(this).animate({ borderColor: "#0e7796", boxShadow: '0 0 5px 3px rgba(100,100,200,0.4)' }, 'slow');
    }).on('blur', function(e) {
        $(this).animate({ borderColor: "#ccc", boxShadow: '0px 0px 0px #fff' }, 'slow');
    });
});

您必须使用 box-shadow 动画插件，可在以下网址获得：http: //www.bitstorm.org/jquery/shadow-animation/

小提琴（更新）：http: //jsfiddle.net/vishaldeep/QgYrG/4/

于 2013-04-10T05:16:08.690 回答
0 
$('#validate').attr('style', "border-radius: 5px; border:#FF0000 1px solid;");
于 2016-01-11T10:52:13.513 回答