Fade effect run in jQuery

Question

Fade effect run in jQuery

Navigation

#1 by (5 votes)

1

Well, I'll try to explain the best, what I intend to do:

I have a div with the border id, which actually serves as the border.

I want to do a jQuery effect, run color-changing, from top to bottom, that is, it's red, then it gets orange, yellow, green, etc ...

Basically it is to make the div change color with fade and run ...

How can I do this?

Thank you.

javascript jquery

asked by anonymous 06.03.2017 / 20:22

1 answer

SQL - Searching for best-selling product in a date range PDO Statement Questions

score 5 · Accepted Answer

I do not know if it's exactly what you're looking for, but somehow you can already have an idea of what to do.

Here is an example below:

.divA {
  width: 400px;
  height: 400px;
  padding-top: 5px;
  background: linear-gradient(89deg, #c3dd39, #39c6dd, red);
  background-size: 400% 400%;
  animation: anim 30s ease infinite;
  -webkit-animation: anim 5s ease infinite;
  -moz-animation: anim 5s ease infinite;
  animation: anim 5s ease infinite;
}

.divB {
  background: #fff;
  width: 390px;
  height: 390px;
  margin: 0px auto
}

@-webkit-keyframes anim {
  0% {
    background-position: 0% 50%
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 0% 50%
  }
}

@-moz-keyframes anim {
  0% {
    background-position: 0% 50%
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 0% 50%
  }
}

@keyframes anim {
  0% {
    background-position: 0% 50%
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 0% 50%
  }
}

<div class="divA">
  <div class="divB">
    Teste
  </div>
</div>