How to increase and decrease opacity after few seconds using javascript?

Question

I have this SVG element in HTML:

<g id="Group-8" transform="translate(108.800000, 0.293172)" fill="#FF056A" opacity="0.1">

Here you can see an attribute called opacity and it's value is 0.1

Now I want to increase it's value to 0.3, 0.6, 0.9 and then again to 0.6, 0.3, 0.1. It should do this all the time.

I have used Javascript setTimeout method but don't know how to make it do what I want :(

setTimeout(function() {
    $("#Group-8-Copy-2").attr('opacity', '0.3');
}, 1000);

`setTimeout` will only fire the function once. You should use `setInterval`if you want to repeat an action each second. With some global state you should be able to do what you want — Axnyff, Sep 09 '18 at 13:47
Have a look at https://stackoverflow.com/questions/22154129/javascript-settimeout-loops . It's pretty much the same question as yours within a little bit different context. — Tomáš Pospíšek, Sep 09 '18 at 13:57

score 1 · Answer 1 · answered Sep 09 '18 at 14:01

1

Checkout below snippet:

$( document ).ready(function() {
    setInterval(function(){
      
      opacity = $('#tilak').css("opacity");
      opacity = Number(opacity) + 0.3;
      if (opacity > 1) {
        opacity = 0;
      }
      $('#tilak').css("opacity", opacity);
      console.log(opacity);
    }, 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="tilak" style="opacity: 0">
kdjkd
</body>

answered Sep 09 '18 at 14:01

Tilak Putta

758
4
18

Almost exactly what I want – Shibbir Sep 09 '18 at 14:03
Accept it if it solved your problem, Im glad that it helped. :) – Tilak Putta Sep 09 '18 at 14:04

score 1 · Answer 2 · edited Sep 09 '18 at 14:45

1

Here you go

var value = [0.1, 0.3, 0.6, 0.9];
var add = true;
var i = 0;

setInterval(function() {
  $("#Group-8-Copy-2").attr('opacity', [value[i]]);
  
  i = add ? i + 1 : i -1;
  add = i == value.length -1 ? false : (i == 0 ? true : add );
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <g id="Group-8-Copy-2" fill="#FF056A" opacity="0.1">
    <circle cx="10" cy="10" r="5" />
  </g>
</svg>

edited Sep 09 '18 at 14:45

Useless Code

12,123
5
35
40

answered Sep 09 '18 at 14:14

Jassim Abdul Latheef

180
1
6

Wow, Great, but can it be more smooth ? – Shibbir Sep 09 '18 at 14:54
I would start `i` at `1` since the original SVG already sets the opacity to `0.1`, that way you aren't waiting an extra second to see it start animating. – Useless Code Sep 09 '18 at 15:34
@creativeartbd Adding more in-between steps to the `value` array would make the animation smoother, although you would have to adjust the interval to keep the animation the same length/speed. – Useless Code Sep 09 '18 at 15:37

score 1 · Answer 3 · answered Sep 09 '18 at 15:31

You can also achieve a pulsing without JS, using CSS animations. Using CSS animations often has advantages over animating with JS, you can more precisely adjust the timing of things by changing the animation-duration and tweaking other things instead of adjusting the length of the timeout on a timer, etc. It also tends to perform better because it is the browser doing all the work rather than your code being interpreted by he browser and interacting with the DOM to make it work.

.stepped-pulse {
  animation-duration: 4s;
  animation-name: stepped-pulse;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: steps(4, end);
}

@keyframes stepped-pulse {
  0% {
    opacity: .01;
  }
  100% {
    opacity: .09;
  }
}

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <g id="Group-8-Copy-2" class="stepped-pulse" fill="#FF056A">
    <circle cx="10" cy="10" r="5" />
  </g>
</svg>

If you want a smoother animation (as you seem to indicate in comments on another answer), you can just change the animation-timing-function (in this case I am removing it ant it will default to ease):

.pulse {
  animation-duration: 4s;
  animation-name: pulse;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes pulse {
  0% {
    opacity: .01;
  }
  
  100% {
    opacity: .09;
  }
}

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <g id="Group-8-Copy-2" class="pulse" fill="#FF056A">
    <circle cx="10" cy="10" r="5" />
  </g>
</svg>

That's is Great answer for my questions :_ – Shibbir Sep 09 '18 at 15:50 — Shibbir, Sep 09 '18 at 15:50

How to increase and decrease opacity after few seconds using javascript?

3 Answers3