Выделите цвет границы с помощью JQuery Animate?

Question

Я хочу выделить границ в TextField с использованием одушевленных функцию, когда нажмите на Добавить анимационную.

Как это:

Js Fiddle Здесь: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

Попробуйте с помощью этого плагина: http://www.bitstorm.org/jquery/color-animation/ и добавить:

<script src="http://www.bitstorm.org/jquery/color-animation/jquery.animate-colors-min.js"></script> 

Пример здесь:

http://jsfiddle.net/N9um8/20/

Answer 2

backgroundColor не является анимационным свойством с анимацией jQuery по умолчанию. В общем, он не может оживлять цвета. У вас будет намного лучшее время, используя простые переходы CSS, хотя они не так широко поддерживаются (IE9 - не будет).

.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 немного времени для анимации, кстати.

Answer 3

У вас есть несколько различных вариантов. Лучшее исполнение мудрый, несомненно, будет CSS:

JS:

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

    $("#search").focus(function() { 
     $(this).css({backgroundColor: '#B6DADA'}); 
    }).blur(function() { 
     $(this).css({backgroundColor: '#fff'}); 
    }).focus(); 

}); 

CSS:

#search { 
    -webkit-transition: .8s background linear; 
    -moz-transition: .8s background linear; 
    -ms-transition: .8s background linear; 
    -o-transition: .8s background linear; 
    transition: .8s background linear; 
} 

The fiddle

Другой способ использует плагин JQuery или что-то (мой любимый называется jquery color), чтобы оживить ваши цвета.

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

    $("#search").focus(function() { 
     $(this).animate({backgroundColor: '#B6DADA'}, 800, 'linear'); 
    }).blur(function() { 
     $(this).animate({backgroundColor: '#fff'}, 800, 'linear'); 
    }).focus(); 

}); 

The fiddle