css边框悬停动画

时间:2013-03-06 05:52:55

标签: javascript jquery css

我正在尝试悬停边框动画。但我没有动画,

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

$(".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);
    });

6 个答案:

答案 0 :(得分:3)

试试这个,在边框属性中添加引号

$(".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);
});

答案 1 :(得分:1)

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

答案 2 :(得分:0)

尝试使用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;
        }

答案 3 :(得分:0)

你无法像这样动画静态边框。 U可以使用css3中的border-images进行操作。

Refer this link了解更多查询

另请查看此plugin

答案 4 :(得分:0)

您必须jQueryjQuery 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,这根本不起作用。

答案 5 :(得分:0)

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