Блог

Я новичок в javascript, и я сделал так, чтобы одно изображение исчезло, но второе изображение не исчезнет в следующем. См. раздел HTML и Javascript. С использованием чистого HTML, CSS И JS без ключевых кадров для анимации. Никаких библиотек или фреймворков для использования.

Для HTML:

     <div id="female" style="opacity: 0;"> 
        <img id="fem" src="./images/female.png" onload="female()">
    </div> 

    <div id="headline1" style="opacity: 0;">
        <img id="t1" src="./images/headline1.png" onload="headline1()">
    </div>
</div>
  

Для JS-кода:

// ЖЕНСКАЯ АНИМАЦИЯ

 function female () {
var opacity = 0; 
var intervalID = 0; 
window.onload = fadeIn; 

function fadeIn() { 
    setInterval(show, 150); 
} 

function show() { 
    var body = document.getElementById("female"); 
    opacity = Number(window.getComputedStyle(body) 
                    .getPropertyValue("opacity")); 
    if (opacity < 1) { 
        opacity = opacity   0.1; 
        body.style.opacity = opacity 
    } else { 
        clearInterval(intervalID); 
    } 
}}
  

// АНИМАЦИЯ ЗАГОЛОВКА 1

 function headline1 () {
var opacity = 0; 
var intervalID = 0; 
window.onload = fadeIn; 

function fadeIn() { 
    setInterval(show, 150); 
} 

function show() { 
    var body = document.getElementById("headline1"); 
    opacity = Number(window.getComputedStyle(body) 
                    .getPropertyValue("opacity")); 
    if (opacity < 1) { 
        opacity = opacity   0.1; 
        body.style.opacity = opacity 
    } else { 
        clearInterval(intervalID); 
    } 
}}
  

Обе функции female() и headline1() назначают свои собственные функции window.onload . Это приведет к тому, что 2 функции будут влиять друг на друга.

Вы можете использовать window.addEventListener вместо window.onload решения этой проблемы.

Учитывая, что ваши female() функции и headline1() функции очень похожи, рекомендуется использовать одну функцию с параметром для указания идентификатора изображения для анимации.

 function animateImage(id, opacity) {
  var intervalID = 0;
  window.addEventListener('load', fadeIn);

  function fadeIn() { 
    setInterval(show, 150);
  }

  function show() { 
    var body = document.getElementById(id); 
    opacity = Number(window.getComputedStyle(body) 
                    .getPropertyValue("opacity")); 
    if (opacity < 1) { 
        opacity = opacity   0.1; 
        body.style.opacity = opacity 
    } else { 
        clearInterval(intervalID); 
    } 
  }
}