Изображение JavaScript исчезает и используется (используя только JavaScript, без jQuery)

Я пытаюсь сделать изображение затухающим, а затем. Проблема в том, что когда я использую две функции, изображение не исчезает, но оно сразу исчезает. Есть ли у кого-нибудь потрясающие навыки JavaScript для решения моей проблемы?Изображение JavaScript исчезает и используется (используя только JavaScript, без jQuery)

Пожалуйста, не говорите мне о jQuery, потому что я уже знаю, как это сделать, используя его, мне нужно только улучшить свои навыки JavaScript.

PS: Мне также нужно понять, почему он не работает и как заставить его работать с такими подробностями.

Вот мой код:

var el = document.getElementById("img1"); 
el.addEventListener("click", function() { 
    function fadeOut() { 
     el.style.opacity = 1; 
     function fade(){ 
     var val = el.style.opacity; 
     if ((val -= .01) > 0){ 
      el.style.opacity = val; 
      requestAnimationFrame(fade); 
     } 
     } 
    fade(); 
    }; 

    function fadeIn() { 
     el.style.opacity = 0; 
     function fade1() { 
     var val = el.style.opacity; 
     if ((val += .01) < 1){ 
      el.style.opacity = val; 
      requestAnimationFrame(fade1); 
     } 
     } 
    fade1(); 
    }; 

    fadeIn(); 
    fadeOut(); 

});

Спасибо!

источник

2016-06-09 Anonymous

Или вы можете использовать CSS сделать это – epascarello

Да, но мне нужно изучить хороший Javascript ... –

http://www.chrisbuttery.com/articles/fade-in-fade-out-with-javascript/ – mariocatch

Вур де выцветанию в:

Function FadeIn(){ 
var milli=3000; //duration 
el=yourelement; 
el.style.opacity=1; 
var a=1/(milli/1000*16);//the -x 
FadeIn_loop(a); 
} 
Function FadeIn_loop(a){ 
if(el.style.opacity>0.01){ 
el.style.opacity=el.style.opacity-a; 
setTimeout("FadeIn("+el+")", 16); //about 1/60 a second 
}else{ 
el.style.opacity=0; 
} 

}

То же самое для гаснуть успех!

В вашем коде есть много вещей, которые не кажутся правильными. Сначала вы получите все эти функции друг от друга, иначе requestAnimationframe can not найдет функции.

источник

2016-06-09 20:35:54

Еще не самый красивый, но я сделал только минимальные изменения в свой код, чтобы сделать его работу: http://codepen.io/rlouie/pen/BzjZmK

Во-первых, вы присваиваете значение непрозрачности назад и вперед несколько раз без причины, что делает код, запутанный, чтобы следовать, а также приводит к конкатенации строк вместо сложения или вычитания, я упростил это. Во-вторых, функции были названы противоположностью того, что они сделали, а также меня смутили и исправили. Наконец, вы выполняли обе функции один за другим, поэтому вторая функция задала непрозрачность нулю и затем сломалась. Вместо этого я использую обещание в своей первой функции и разрешаю его, когда анимация завершается.

Таким образом, вторая функция не запускается до тех пор, пока первая не завершит анимацию.

var el = document.getElementById("img1"); 
el.addEventListener("click", function() { 
    function fadeOut() { 
     return new Promise(function (resolve, reject) { 
     let opacity = 1; 
     function fade(){ 
     if ((opacity -= .01) > 0){ 
      el.style.opacity = opacity; 
      requestAnimationFrame(fade); 
     } else { 
      resolve(); 
     } 
     } 
    fade(); 
    }); 
    }; 

    function fadeIn() { 
     let opacity = 0; 
     function fade1() { 
     if ((opacity += .01) < 1){ 
      el.style.opacity = opacity; 
      requestAnimationFrame(fade1); 
     } 
     } 
    fade1(); 
    }; 

    fadeOut().then(fadeIn); 

});

источник

2016-06-09 20:50:29

Подождите, функции называются один за другим. –

Да. В вашем коде вы постепенно исчезаете, а затем мгновенно исчезаете. Вместо этого вам нужно ждать, чтобы запустить fadeIn до тех пор, пока не завершится fadeOut. Вот почему у меня есть обещание, которое разрешается, когда анимация завершается. Итак, fadeOut запускается, * затем *, когда он закончил затухание fadeIn. –

Да, но в других языках программирования, таких как Python, функции выполняются последовательно последовательно. Например, fadeOut() завершит работу перед запуском функции FadeIn(). –

Мое предложение:

начало анимации с FadeIn
когда FadeIn отделки начала затухания

var el = null; 
 

 
function fadeIn(timestamp) { 
 
    var val = (+el.style.opacity == 0) ? 1 : +el.style.opacity; 
 
    if ((val -= .005) > 0) { 
 
    el.style.opacity = val; 
 
    window.requestAnimationFrame(fadeIn); 
 
    } else { 
 
    window.requestAnimationFrame(fadeOut); 
 
    } 
 
} 
 

 
function fadeOut(timestamp) { 
 
    var val = (+el.style.opacity == 0) ? 1 : +el.style.opacity; 
 
    if ((val += .005) < 1) { 
 
    el.style.opacity = val; 
 
    window.requestAnimationFrame(fadeOut); 
 
    } 
 
}; 
 

 
window.onload = function() { 
 
    el = document.getElementById('img1'); 
 
    el.addEventListener('click', function(e) { 
 
    window.requestAnimationFrame(fadeIn); 
 
    }); 
 
}

<img id="img1" src="http://www.loc.gov/pictures/static/data/highsm/banner.jpg">

источник

2016-06-09 20:54:08 gaetanoM

Изображение JavaScript исчезает и используется (используя только JavaScript, без jQuery)

ответ

Смежные вопросы