Question

我知道我可以使用borderColor和borderWidth制作边框颜色或边框宽度的动画。虽然，我正在试图弄清楚如何使用这种风格，borderStyle将不起作用，我试图昨天搜索，但没有成功。是否可以使用.animate()？

来影响它

Answer 1

为什么不使用CSS来动画这个？ CSS3过渡非常酷！ Click to Preview here

$(this).toggleClass('animate');

将切换类animate，该类在css：

中设置样式

.with-border {
    display: block;
    padding: 20px;
    border: 2px solid #ddd;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.with-border.animate {
    border: 10px dashed #ff0000;
}

可以在css

中自定义transition速度

PS：边框样式已更改，但未设置动画。感谢评论。

Answer 2

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
    <style>
    .dashedclass
    {
    border:2px dashed red;
    }
    .solidclass
    {
    border:2px solid black;
    }
    #somediv{
    height:100px;width:100px;
    background:#aabbee;
    }
    </style>
     <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
     <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>
    $(document).ready(function(){
    $("#somediv").mouseenter(function(){
    $(this).removeClass("solidclass");

        $(this).switchClass( "dashedclass", "solidclass", 1000, "easeInOutQuad" );
    }).mouseleave(function(){

    $(this).switchClass( "solidclass", "dashedclass", 1000, "easeInOutQuad" );
    })
    });
    </script>
     </head>
    <body>
    <div id="somediv"></div>
   </body>
   </html>

如何在jQuery中设置边框样式的动画？

2 个答案: