Toggle divs with pure JS

Question

The scenario: one main container, a child img with opacity 1 and a child span with opacity 0, both absolute positioned against the relative positioned parent div. Decrease the opacity of img and simultaneously increase the opacity of span. When the opacity exceeds some threshold, e.g. 0.01 and 0.99 hide/show (display: none; display: inline-block) the img/span respectively. And then the reverse process to show the img and hide the span. What would be the best solution (probably using CSS3) to achieve that?

<div id="post-cont">
    <img id="post-img-1" class="post-img" src="small.jpg"/>
    <span id="post-txt-1" class="post-txt">Some text</span>
</div>

Had some workaround with JS, but it is laggy so I would like to solve this using CSS3 and as minimal JS as possible.

Have you tried this? http://stackoverflow.com/questions/16546272/css-transition-fade-in-only-for-element — Ruud Helderman, Feb 06 '14 at 20:50

Christopher Marshall · Accepted Answer · 2014-02-06T22:47:48.380

3

CSS3 only

http://jsfiddle.net/SPmj5/7/

<div id="post-cont">
    <img id="post-img-1" class="post-img" src="http://placehold.it/250x250"/>
    <span id="post-txt-1" class="post-txt">Some text</span>
</div>


#post-cont {
    position: relative;
}

#post-cont img,
#post-cont span {
    display:block;
-o-transition: opacity .7s ease;
    -ms-transition: opacity .7s ease;
    -moz-transition: opacity .7s ease;
    -webkit-transition: opacity .7s ease;
    transition: opacity .7s ease;    
}

#post-cont img {
    position: absolute;
    top: 0;
    left: 0;
   opacity: 1;
}

#post-cont span {
    position: absolute;
    top: 100px;
    left: 80px;
   opacity: 0; 
}

#post-cont:hover img {
    opacity: 0;
}

#post-cont:hover span {
    opacity: 1;
}

Be aware transition is not supported in IE8/9 http://caniuse.com/#search=transition

edited Feb 06 '14 at 22:47

answered Feb 06 '14 at 20:55

Christopher Marshall

10,678
10
55
94

The idea is to set display: none; to img after opacity is low enough so the span can take img place. Any ideas? – sitilge Feb 06 '14 at 22:20
If they're positioned absolutely it really wouldn't need to take its place(?). You could just break out the transition properties and start the span one closer to where the other one finishes. – Christopher Marshall Feb 06 '14 at 22:45
If there could be such option to give you more votes :) – sitilge Feb 06 '14 at 23:03

score -1 · Answer 2 · answered Feb 06 '14 at 20:55

-1

Sounds like some fadeToggle to me! I don't think you can use pure CSS3 for this..

https://api.jquery.com/fadeToggle/

answered Feb 06 '14 at 20:55

httpgio

127
6

Toggle divs with pure JS

2 Answers2