FadeIn and FadeOut with Javascript and no Jquery

Question

I have an image map and when the user hovers over the map I want to fade-in a small div with informations on the hovered content, then upon the mouse leaving the map fade-out with a two second delay.

possible duplicate of [fade effect using javascript no jquery?](http://stackoverflow.com/questions/5104053/fade-effect-using-javascript-no-jquery) — Andrew Walters, Jul 25 '13 at 17:50
Could clarify your question by adding informations on what you tried and what your actual issue is ? — yadutaf, Jul 25 '13 at 18:05

nullability · Accepted Answer · 2013-07-25T18:05:34.347

2

It's possible to do a fade effect by animating opacity using CSS transitions:

.small_div {
    opacity: 0;
    -webkit-transition: opacity 1s;
    -ms-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
}
.small_div.active {
    opacity: 1
}

To use this class, you will need to have some javascript to add the .active class when the image map is hovered and fill the .small_div with the necessary data.

IF you don't want to use a class, you can just change the opacity property directly using javascript and that change will also be animated.

Note that this will not work in older browsers like IE8, but it should degrade gracefully.

edited Jul 25 '13 at 18:05

answered Jul 25 '13 at 17:54

nullability

10,545
3
45
63

Could I change it by merely editing the style of the div with the script? Like, change the opacity and transition with a simple function? – Bob Jul 25 '13 at 17:56
That's not what I meant. Instead of making it active, can I directly affect the style of it? – Bob Jul 25 '13 at 17:57
Yes, that is possible. You don't need the active class; the transition will animate any changes to the opacity, so if you programmatically set the opacity to another value that will also work. – nullability Jul 25 '13 at 18:04

score 0 · Answer 2 · answered Jul 25 '13 at 18:26

Unlike nullability suggests, you can do this fully with only CSS including the delay, no added classes involved. Here is a fiddle to prove it

HTML:

<div id='map'>
    <div id='overlay'></div>
</div>

CSS:

#map {
    height:100px;
    width:100px;
    background:red;
}
#overlay {
    z-index:2;
    background:black;
    height:100px;
    width:100px;
    opacity:0;
    -webkit-transition: opacity 1s;
    -ms-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;

    transition-delay: 2s;
    -webkit-transition-delay: 2s;
}
#overlay:hover {
    opacity:.8;    
    transition-delay: 0s;
    -webkit-transition-delay: 0s;
}

FadeIn and FadeOut with Javascript and no Jquery

2 Answers2