使用 Jquery Animate 突出显示边框颜色？答案

【问题标题】：Highlight Border Color Using Jquery Animate?使用 Jquery Animate 突出显示边框颜色？
【发布时间】：2013-10-08 14:09:00
【问题描述】：

我想在点击添加动画链接时使用动画功能高亮文本字段的边框.

像这样：

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");     

});

【问题讨论】：

你不能用 jQuery 为颜色或阴影设置动画，至少不使用 step 方法和 jQuery UI 等是不行的，但你可以做其他人都在做的事情，使用 CSS3 -> @ 987654322@
好吧，它工作正常，但是当这个文本字段失去焦点时它应该删除类
所以只需添加 -> jsfiddle.net/N9um8/30
@adeneo 工作正常，背景颜色是什么？
如果你不想添加背景颜色，只需将其添加到类中 -> jsfiddle.net/N9um8/35

标签： javascript jquery html css animation

【解决方案1】：

backgroundColor 默认情况下不是 jQuery animate 的动画属性。通常，它不能为颜色设置动画。尽管没有得到广泛支持（IE9- 不会），但使用简单的 CSS 过渡效果会更好。

.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有点长。

【讨论】：

看不到你的小提琴中的 Jquery 代码

【解决方案2】：

您有几个不同的选择。最好的性能肯定是 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

【讨论】：

边框仍未突出显示
只需在 js 中添加 borderColor: '#ccc' 或任何你想要的颜色。

【解决方案3】：

试试这个插件：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/

【讨论】：