CODEWITHSUNDEEP
jquery
Omer Aviv
Omer Aviv

Reputation: 284

How to animate border-style in jQuery?

I know I can animate border-color or border-width with borderColor and borderWidth. Though, I'm trying to figure out how to do it with the style as borderStyle won't work and I tried searching yesterday but without success. Is it possible to affect it with .animate()?

Upvotes: 0

Views: 340

Answers (2)

Mohan Kumar
Mohan Kumar

Reputation: 102

<!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>

Upvotes: -1

ahmet2106
ahmet2106

Reputation: 5007

Why not using CSS to animate this? CSS3 Transitions are pretty cool! Click to Preview here

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

will toggle the class animate, which is styled in 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;
}

the transition speed can be customized in css

PS: The Border Style is changed, but not animated. Thanks to the Comments.

Upvotes: 2

Related Questions