文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用javascript在几秒钟后增加和减少不透明度？

问如何使用javascript在几秒钟后增加和减少不透明度？
EN

Stack Overflow用户

提问于 2018-09-09 21:44:32

回答 3查看 1K关注 0票数 0

我在HTML中有这个SVG元素：

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

在这里您可以看到一个名为opacity的属性，它的值为0.1

现在我想把它的值增加到0.3，0.6，0.9，然后再增加到0.6，0.3，0.1。它应该一直这样做。

我用过Javascript的setTimeout方法，但不知道如何让它做我想做的事情:(

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

javascript

jquery

回答 3

Stack Overflow用户

发布于 2018-09-09 22:01:47

检出以下代码片段：

$( 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>

票数 1

Stack Overflow用户

发布于 2018-09-09 22:14:10

这就是你要的

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>

票数 1

Stack Overflow用户

发布于 2018-09-09 23:31:44

您也可以使用CSS animations在没有JS的情况下实现脉冲。使用CSS动画通常比使用JS动画有优势，你可以通过改变animation-duration和调整其他东西来更精确地调整事情的计时，而不是调整计时器上的超时长度等。

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

如果你想要一个更流畅的动画(就像你在对另一个答案的评论中指出的那样)，你只需更改animation-timing-function (在本例中，我将删除它，它将默认为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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52245119

复制

相似问题

问如何使用javascript在几秒钟后增加和减少不透明度？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用javascript在几秒钟后增加和减少不透明度？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用javascript在几秒钟后增加和减少不透明度？
EN