【问题标题】：css border hover animationsCSS边框悬停动画
【发布时间】：2013-06-09 00:11:50
【问题描述】：

我正在尝试悬停边框动画。但我没有得到动画，

这是我的代码。你能帮我么。

$(".divBox1").mouseover(function(){
        console.log('enter');
        $(this).animate({border: "3px solid #000"}, 100);
    }).mouseout(function(){
            console.log('out');
            $(this).animate({border: "3px solid #FFF55B"}, 100);
    });

【问题讨论】：

您确定已将 jQuery 正确安装到您的网页中吗？向我们展示您的做法可能会对您可能收到的答案产生一些影响。
您的代码是否已经在内部$(document).ready(function(){ }); ？
'code''code'
@sridhar 你也需要使用jQuery ui。

标签： javascript jquery css

【解决方案1】：

试试这个，给边框属性加引号

$(".divBox1").mouseover(function(){
    //console.log('enter');
    $(this).animate({"border": "3px solid #000"}, 100);
}).mouseout(function(){
    //console.log('out');
    $(this).animate({"border": "3px solid #FFF55B"}, 100);
});

【讨论】：

您必须使用 jquery-UI 来为边框颜色设置动画

【解决方案2】：

尝试用双引号将css边框属性括起来

【讨论】：

【解决方案3】：

用 css 试试，很简单

  .divBox1{
 border: 3px solid #FFF55B;
}

.divBox1:hover {
        border: 3px solid #000;
            -webkit-transition: all 0.25s ease-in-out;
            -moz-transition: all 0.25s ease-in-out;
            -o-transition: all 0.25s ease-in-out;
            -ms-transition: all 0.25s ease-in-out;
            transition: all 0.25s ease-in-out;
        }

【讨论】：

【解决方案4】：

您不能像这样为静态边框设置动画。 U 可以使用 css3 中的边框图像进行操作。

Refer this link更多查询

也看看这个plugin

【讨论】：

【解决方案5】：

看到你必须使用jQuery 和jQuery ui 来表示animating colors。因为您的代码建议you just want to animate colors not the width，所以可以使用

实现动画宽度

borderWidth: '3px'

css:

.divBox1 {
   border:solid 3px #FFF55B;
}

脚本：

 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
 <script>
     $(function(){
         $(".divBox1").mouseover(function () {
             $(this).animate({borderColor: "#000"}, 800);
         }).mouseout(function () {
             $(this).animate({borderColor: "#FFF55B"}, 800);
         });
     });
 </script>

tryout in fiddle here

注意：

没有jquery ui，这根本行不通。

【讨论】：

@sridhar 现在您可以接受它作为您问题的答案。谢谢。

【解决方案6】：

是this你想要什么？

    $(".divBox1").css("border","3px solid transparent").mouseover(function(){
        //console.log('enter');
        $(this).animate({"border-color": '#000'}, 100);
    }).mouseout(function(){
        //console.log('out');
        $(this).animate({"border-color": "#FFF55B"}, 100);
    });

注意：

你需要 jQuery UI

【讨论】：