Question

我想在一段时间后定期更改文本的不透明度。在一段时间后，不透明度应从30％变为100％。

我用过：

$("#mydiv").animate({opacity:1.0},2000);

但无法使其循环。

Answer 1

您可以通过CSS实现此目的：

#mydiv {
    animation-name: periodicfading;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-delay: 0s;
}

@keyframes periodicfading {
    0% {
        opacity: 0.3;
    }
    50% {
        opacity: 1.0;
    }
    100% {
        opacity: 0.3;
    }
}

Answer 2

您可以为div使用css不透明度动画，然后添加此代码

.myID {

animation-iteration-count：无限；

}

Answer 3

这应该使您了解如何使用setInterval随时间改变不透明度。

我让您继续“循环”，而不是在达到100％时结束循环。（作为提示，您可以编写一个名为“ lighten”的类似函数，并使用一个名为“ gettingDarker”的布尔值来帮助确定要调用的函数。）

const myDiv = document.getElementById("myDiv"); // Gets a reference to the div
let opacity = 0.3; // Initializes the JavaScript variable
myDiv.style.opacity = opacity; // Initializes the div's opacity

// Calls `darken` every 500ms
// (Identifies `ticker` so we could later pass it to `clearInterval`)
const ticker = setInterval(darken, 500);

function darken(){
  console.log(opacity);
  if(opacity < 1){
    opacity += 0.1; // Increases the value
    myDiv.style.opacity = opacity; // Applies the new value to the div
  }
  else{ // Already 100% opaque, so stop calling the function
    clearInterval(ticker);
  }
}

<div id="myDiv">Text that gets darker</div>

如何在一定间隔后定期更改给定文本的不透明度

3 个答案: