Fade effect run in jQuery

Asked

Viewed 193 times

1

Well, I’ll try to explain in the best way, what I intend to do:

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

I intend to make an effect in jQuery, run color change, top to bottom, ie it is red, then goes orange, yellow, green etc...

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

How can I do that?

Thank you.

javascript jquery

  • take a look here: CSS Gradient Border

  • It’s like this, Douglas, only I want the colors to be always running in real time with jquery

  • put what you already have as code brother

  • I have no code, which is why I intend to do this.

  • Do you need to animate the colors? If yes, don’t use jQuery for this, the CSS itself already has a feature called CSS Animations. Create on this site your color animation, and change the code according to what you need for your "edge", use background instead of border-color. CSS Gradient Animator

  • Can you give an example?

  • @Gonçalo, if you didn’t take the trouble to research and learn to try something, who are we to help you? We are not here to work for you, but to help solve problems you encountered in the middle of development.

Show 2 more comments

1 answer

5


I don’t know if it’s exactly what you’re looking for, but somehow it might give you an idea of what to do.

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

  • Excellent! Very good, that’s just what I needed.

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.