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 <center> tag, it's deprecated — jonny
– jonny, Commented Nov 3, 2015 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
– somethinghere, Commented Nov 3, 2015 at 17:20
Possible duplicate of How to do fade-in and fade-out with JavaScript and CSS — Moob
– Moob, Commented Nov 3, 2015 at 17:37

ashleedawg · Accepted Answer · 2019-10-30 15:32:01Z

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.sstatic.net/NHlV8.jpg" draggable="true" ondragstart="drag(event)" width="500" height="500">
</center>

edited Oct 30, 2019 at 15:32

ashleedawg

21.9k9 gold badges82 silver badges120 bronze badges

answered Nov 3, 2015 at 17:23

Kishore Sahasranaman

4,2504 gold badges27 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

somethinghere Over a year ago

Scratch that, your SO snippet simply requires a scroll down. Maybe switch the button with the image position? Just for clarity. otherwise +1

Kishore Sahasranaman Over a year ago

@somethinghere the button click not getting triggered in snippet , but works perfectly in jsfiddle. any idea?

Moob · Accepted Answer · 2015-11-03 17:22:15Z

5

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 3, 2015 at 17:22

Moob

16.5k1 gold badge40 silver badges54 bronze badges

3 Comments

somethinghere Over a year ago

@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.

Moob Over a year ago

@cale_b Noted, although part of learning javascript is knowing when not to use it ;)

random_user_name Over a year ago

@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)

Collectives™ on Stack Overflow

fade in image javascript

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related