fade in image javascript

Question

I am a new-newbie in JavaScript and I am trying to write a code that fades-in a picture in commands that I am familiar with. I've seen several examples here but they didn't work. This is what I tried to do:

 function myFunction() {
   for (i = 1; i < 20; i++) {
     setTimeout(function() {
       o = 1 - 1 / i
     }, 200); //this should increase the opacity
     document.getElementById("dog").style.opacity = o
   }
 }

img {
  opacity: 0;
  filter: alpha(opacity=40);
}

<center>
  <img id="dog" src="dog.jpg" draggable="true" ondragstart="drag(event)" width="500" height="500">
</center>

<button onclick="myFunction()">Lets Rock</button>

when I ran it, it doesn't do fade in. it starts with blank screen (as it should), but than instead of fading in after I click the button, it just pops out (without fading in) after a few clicks.

thank you very much for help given
Ariel

How old is this example? You shouldn't use the `` tag, it's deprecated — jonny, Nov 03 '15 at 17:09
All your timeout are fired at the same time, aka `100` milliseconds _after_ they are declared. Try: `setTimeout(function(){o=1-1/i}, 100 * i);` And dd the opacity thing in the function of the timeout. — somethinghere, Nov 03 '15 at 17:20
Possible duplicate of [How to do fade-in and fade-out with JavaScript and CSS](http://stackoverflow.com/questions/6121203/how-to-do-fade-in-and-fade-out-with-javascript-and-css) — Moob, Nov 03 '15 at 17:37

score 6 · Accepted Answer · edited Oct 30 '19 at 15:32

6

Try this : http://jsfiddle.net/kishoresahas/4wg8zcsg/

function fadeIn(el) {
    el.style.opacity = 0;
    var tick = function () {
        el.style.opacity = +el.style.opacity + 0.01;
        if (+el.style.opacity < 1) {
            (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16)
        }
    };
    tick();
}

function myFunction() {
    var el = document.getElementById("dog");
  console.log(el);
    fadeIn(el);
}

img {
    opacity: 0;
    filter: alpha(opacity=40);
}

<button onclick="myFunction()">Lets Rock</button>

<center>
    <img id="dog" src="https://i.stack.imgur.com/NHlV8.jpg" draggable="true" ondragstart="drag(event)" width="500" height="500">
</center>

edited Oct 30 '19 at 15:32

ashleedawg

20,365
9
72
105

answered Nov 03 '15 at 17:23

Kishore Sahasranaman

4,013
3
24
50

1

Scratch that, your SO snippet simply requires a scroll down. Maybe switch the button with the image position? Just for clarity. otherwise +1 – somethinghere Nov 03 '15 at 17:27
@somethinghere the `button` click not getting triggered in snippet , but works perfectly in jsfiddle. any idea? – Kishore Sahasranaman Nov 03 '15 at 17:33

score 4 · Answer 2 · answered Nov 03 '15 at 17:22

4

You might find it easier to control the opacity using CSS. Its less work for the browser and only requires minimal javascript to toggle the class.

var img = document.getElementById("dog"),
    btn = document.getElementById("button");

btn.addEventListener("click", function( event ) {
    img.className = (img.className==="in")?"out":"in";
}, false);

#dog {
  opacity: 0;
  -webkit-transition: opacity 2s ease;
  -moz-transition: opacity 2s ease;
  -ms-transition: opacity 2s ease;
  -o-transition: opacity 2s ease;
  transition: opacity 2s ease;
}
#dog.in {
    opacity: 1;
}

<button id="button">Lets Rock</button><br />
<img id="dog" src="http://lorempixel.com/500/500/cats/" class="off" draggable="true" ondragstart="drag(event)" width="500" height="500">

answered Nov 03 '15 at 17:22

Moob

14,420
1
34
47

@cale_b Although I agree I still upvoted as this is the kind of _proper_ solution people should aim for. I do agree that the OP asked for JS. – somethinghere Nov 03 '15 at 17:26
1

@cale_b Noted, although part of learning javascript is knowing when not to use it ;) – Moob Nov 03 '15 at 17:33
@somethinghere - While you are both correct and I recognize this is a far simpler / superior solution, this logic also means that this question is fair game for jQuery or other framework solutions, yes? I guess my point is - let's answer the question the way they asked, or else (in comments) tell them there's a better way. The OP could simply be asking the question in an attempt to learn how to do things, not *just* to achieve the outcome. (There is value in writing your own "fade-in" in vanilla javascript, if for no other reason to recognize the value of using jQuery or CSS3) – random_user_name Nov 03 '15 at 21:12

fade in image javascript

2 Answers2