Fading classes into each other by multiple using of switchClass

Question

I want a result like this:

Fade border-color of #mydiv from .color1 to .color2, .color2 to .color3, .color3 to .color4 and then .color4 to .color1.

Why shouldn't the following code work?

$( "#mydiv" ).switchClass( "color1", "color2", 1000 ).switchClass( "color2",
"color3", 1000 ).switchClass( "color3", "color4", 1000 ).switchClass(
"color4", "color1", 1000 );

Dear guys, also let me know if that's easier to get it done using CSS transition.

Answer 1

This Solution might help you.

<div id="foo">
</div>

 div#foo {
    width: 100px;
    height: 100px;
    border: 3px red solid;
    position: relative;
    -webkit-animation: mymove 5s infinite;
    animation: mymove 5s infinite;
    /*if you want to play animation for once onlye then you can use forwards instade of infinite.*/
}
@-webkit-keyframes mymove {
    0% {
        border: 3px red solid
    }
    25% {
        border: 3px #000 solid
    }
    75% {
        border: 3px blue solid
    }
    100% {
        border: 3px green solid
    }
}
@keyframes mymove {
    0% {
        border: 3px red solid
    }
    25% {
        border: 3px #000 solid
    }
    75% {
        border: 3px blue solid
    }
    100% {
        border: 3px green solid
    }
}