CODEWITHSUNDEEP
javascriptjquerycssjquery-uifade
Mohammad Naji
Mohammad Naji

Reputation: 5442

Fading classes into each other by multiple using of switchClass

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.

Upvotes: 1

Views: 68

Answers (2)

Ian Hazzard
Ian Hazzard

Reputation: 7771

Yes, it would be easier to use a CSS animation. This one is set to run infinitely @ 5s per animation:

div {
  width: 100px;
  height: 100px;
  padding: 5px;
  text-align: center;
  border: 2px solid red;
  -webkit-animation: myfirst 5s infinite;
  /* Chrome, Safari, Opera */
  animation: myfirst 5s infinite;
}
/* Chrome, Safari, Opera */

@-webkit-keyframes myfirst {
  0% {
    border-color: red;
  }
  25% {
    border-color: yellow;
  }
  50% {
    border-color: blue;
  }
  75% {
    border-color: green;
  }
  100% {
    border-color: red;
  }
}
/* Standard syntax */

@keyframes myfirst {
  0% {
    border-color: red;
  }
  25% {
    border-color: yellow;
  }
  50% {
    border-color: blue;
  }
  75% {
    border-color: green;
  }
  100% {
    border-color: red;
  }
}
<div>Hello, check out my border that is ALWAYS changing color :)</div>

Hope this helps!

Upvotes: 1

Shirish Patel
Shirish Patel

Reputation: 874

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

Upvotes: 1

Related Questions