Question

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

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

Answer 1

您可以使用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没有简单的方法 - 它需要一个插件。我想你可以将输入叠加在一个看不见的阴影状态之上，然后为它的显示设置动画。

Answer 2

你可以这样做

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

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

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

Answer 3

如果你需要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');
    });
});

您必须使用框形阴影动画插件，可从以下位置获取：http://www.bitstorm.org/jquery/shadow-animation/

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

Answer 4

$('#validate').attr('style', "border-radius: 5px; border:#FF0000 1px solid;");

在jquery中突出显示表单域的边框

4 个答案: