Highlight Border Color Using Jquery Animate?

Question

I want to highlight the borders of a textfield using animate function, when click on Add Animation Link.

Like this:

Js Fiddle Here: 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;  
}   

Jquery:

$(".add_animation").click(function (){

    $("#search").focus().animate({ "background-color": "#B6DADA" }, 800, "linear");     

});

Answer 1

backgroundColor is not an animatable property with jQuery animate by default. In general, it cannot animate colors. You will have a much better time using simple CSS transitions although they are not as widely supported (IE9- will not).

.field_style {
    width:400px;
    transition: box-shadow .8s linear;
    outline: 0;
}
.field_style:focus {
    box-shadow: 0 0 10px #6EA2DE;
    border-color: #6EA2DE;
}

http://jsfiddle.net/N9um8/31/

.8s is a bit long for the animation by the way.