Fade an Image Using JavaScript (NOT JQuery!)

Question

Hey everyone I have a homework question,

I need to fade in and out an image "gallery-style" using JavaScript. Note: NOT JQuery. I cannot use JQuery, per the assignment outline.

So there's a grid of images (32 of em if you care) they're all 100x100px thumbnails. Each one is in its own div, and the whole thing is nested inside another div, like so:

gallery.html

<div id="imageContent">

<div id="img" class="imageWhite" 
     onclick="fade(1984)"
     onmouseover="highlightWhiteFunction(this)" 
     onmouseout="unHighlightFunction(this)"> 
     <img src="../Media/Thumbs/1984.jpg"/> 
</div>

...31 others just like that

</div> //End of the whole container

So when you click on one of these images, it should fade that image in over the top of everything else. The width of this picture should be 500px, but the height can vary so distortion doesn't occur. Again, I CANNOT use JQuery for this...and yes, I know that'd make life a lot easier.

So far I only have a debug thing to detect that I can at least find which one is clicked on:

gallery.js

function fade(name) {
    var theName = name;
    console.debug("Clicked " + theName);
}

If the user clicks anywhere on this image, it needs to fade out. If the user clicks another thumbnail, it doesn't need to fade out, it can just disappear, but the other one needs to start fading in.

My thoughts: Obviously I need a hidden div with width 500, and when these actions occur, I hide/unhide the div as necessary. The gist I've gotten from the professor is that to use JavaScript, you change the opacity in relation to a passage of time that you get from the system.

What I'm looking for in an answer here is maybe some clearer (more detailed) hints on how to go about this. I know how it needs to look, and I'm pretty sure I know the high-level of how to do it, I just don't know how to start doing it with code.

Any help would be appreciated, and I'll be around to answer any follow-up questions.

Again: NO JQuery! :)

You may accomplish this using CSS3 Animations.. The JS will only toggle the css effect class. — enapupe
– enapupe, Commented Feb 10, 2014 at 0:06
and also, how you do those event handlers is old and obstrusive. Use JS to loop through and apply handlers — markasoftware
– markasoftware, Commented Feb 10, 2014 at 0:08
You will have to use some kind of CSS, at least the opacity. The setTimeout JS function will allow you to execute a function on a delay, like 50 milliseconds or something. Then, from within the function, call the setTimeout again on the same function until you reach some end condition where you don't re-call the function, and the animation is over. — jwatts1980
– jwatts1980, Commented Feb 10, 2014 at 0:11
If you go with a JS Loop, check "request animation frame" (rAF). — enapupe
– enapupe, Commented Feb 10, 2014 at 0:13

user3290988 · Accepted Answer · 2014-02-10 00:18:49Z

6

Something like this should work

 function fadeIn(el, time) {
     el.style.opacity = 0;
     el.style.display = "block";

     var last = +new Date();
     var tick = function() {
          el.style.opacity = +el.style.opacity + (new Date() - last) / time;
          last = +new Date();

          if (+el.style.opacity < 1) {
               (window.requestAnimationFrame && requestAnimationFrame(tick)) ||      setTimeout(tick, 16)
          }
     };

     tick();
}

Here is an example: http://jsfiddle.net/cEDbs/

Just bind the image onclick to call that method with the element.

answered Feb 10, 2014 at 0:18

user3290988

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

13 Comments

iMatthewCM Over a year ago

God bless you. This is fantastic, I really appreciate this. Really fantastic solution, I'll be able to adapt this well to my needs.

iMatthewCM Over a year ago

Out of curiosity, your solution uses document.getELement..... and it seems to require that the image already be somewhere on the page. So, is there some way I can pass a new image source to it? Like somehow do fadeIn(img src="../Media/Large/1984.jpg", 1000)?

qubyte Over a year ago

If you can use requestAnimationFrame then you likely have access to Date.now() for ms since the epoch. This should be preferred over in both cases above.

user3290988 Over a year ago

@Joodoo You could append the element to the div with display: none and then call the fadeIn function on it.

iMatthewCM Over a year ago

@RyanPrintup So, I've got 32 images total in a gallery. 4 rows of 8 image thumbnails. Does that mean I need 32 of these hidden divs? Or can I append 32 images into the div? (Essentially: click on 1 of these 32 images, fade in THAT image into the hidden div)

|

Miro · Accepted Answer · 2014-02-10 00:40:17Z

Here is a CSS based solution. The fade may not be exactly like you want, but can easily be adjusted. Try out the JSFiddle and click an image to see a css transition-- clicking an image fades it larger. Click again fades it back.

http://jsfiddle.net/Rh976/

<img src="http://tippvet.com/wp-content/uploads/2013/05/cat-vet.jpg" class="img img1"/>
<img src="http://tippvet.com/wp-content/uploads/2013/05/cat-vet.jpg" class="img img2"/>
<img src="http://tippvet.com/wp-content/uploads/2013/05/cat-vet.jpg" class="img img3"/>
<img src="http://tippvet.com/wp-content/uploads/2013/05/cat-vet.jpg" class="img img4"/>

JS

var imgs = document.getElementsByTagName('img');
for(var i = 0; i < imgs.length; i++){
    var img = imgs[i];
    img.addEventListener('click',function(e){  
        if(!this.className.match(/big/)){          
            this.className += ' big'; 
        } else {
             this.className = this.className.replace(/big/,'');
        }
    });        
}

CSS

.img {
    -webkit-transition: all 1.0s ease-out;
    -moz-transition: all 1.0s ease-out;
    -o-transition: all 1.0s ease-out;

    position:absolute;   
    width:150px;
    height:100px;
    z-index:1;
}

.img.img1 { top: 10px;  left: 10px; }
.img.img2 { top: 10px;  left:170px; } 
.img.img3 { top:120px;  left: 10px; }
.img.img4 { top:120px;  left:170px; } 

.img.big {
    position:absolute;
    width:450px;  
    height:300px;
    top:10px;
    left:10px;
    z-index:20;
}

Collectives™ on Stack Overflow

Fade an Image Using JavaScript (NOT JQuery!)

2 Answers 2

13 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

13 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related