Как периодически изменять непрозрачность данного текста через некоторый интервал

Question

Я хочу периодически менять непрозрачность текста после некоторого интервала. Через некоторое время непрозрачность должна измениться с 30% до 100% в цикле.

Я использовал:

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

, но не могу получить его в цикле.

Answer 1

Вы можете использовать анимацию непрозрачности css для div, а затем добавить этот код

.myID {

Счетчик итераций анимации: бесконечный;

}

Answer 2

Это должно дать вам представление о том, как изменить непрозрачность с течением времени, используя 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>

Answer 3

Вы можете добиться этого с помощью 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;
    }
}