当单击Add Animation Link时,我想使用animate函数突出显示文本字段的边框。
像这样:
Js 小提琴在这里:http: //jsfiddle.net/N9um8/20/
HTML:
<div>
<p>
<input type="text" name="search" id="search" placeholder="Search for people...." class="field_style">
</p>
<p> <a href="javascript:void(0);" class="add_animation">Add Animation</a> </p>
</div>
<p class="styling"> I want it like this when click on Add Animation :</p>
<div>
<p>
<input type="text" name="test_search" id="test_search" placeholder="Search for people...." class="test_field_style">
</p>
</div>
CSS:
.field_style { width:400px; }
.styling { color:red; }
.test_field_style {
border-color: #6EA2DE;
box-shadow: 0 0 10px #6EA2DE;
width:400px;
}
查询:
$(".add_animation").click(function (){
$("#search").focus().animate({ "background-color": "#B6DADA" }, 800, "linear");
});