Fade in selected div and set it on top of the others

Question

I need to create a menu with divs on top of each other and when a div is clicked, I want it to be on top of the others.

Something very similar to this but when clicked, I want it to fade in on top of the other divs.

Any Ideas?

Thanks.

related http://stackoverflow.com/questions/3079330/css3-fade-effect — TheTechGuy, Jul 31 '12 at 08:05

score 4 · Answer 1 · answered Jul 31 '12 at 08:07

4

Something like this maybe. May need tweaking to suit.

DEMO

$("div").click(function(){
    $("div").css("zIndex",1);
    $(this).fadeOut('slow', function() {
        $(this).css("zIndex",100);
        $(this).fadeIn('slow');
    });
});

answered Jul 31 '12 at 08:07

TheCarver

19,391
25
99
149

bingjie2680 · Accepted Answer · 2012-07-31T08:11:11.423

2

Could user animate to animate the opacity when it is on top: http://jsfiddle.net/bingjie2680/f9j9a/120/

$("div").click(function(){
    $("div").css("zIndex",1);
    $(this).css({"zIndex":100, 'opacity':0.4}).animate({'opacity':1}, 1000);
});

edited Jul 31 '12 at 08:11

answered Jul 31 '12 at 08:04

bingjie2680

7,643
8
45
72

This is almost what I was looking for - how do I control the timing of the animation? – Justin Meli Jul 31 '12 at 08:08
add the the time as second arg. see update, you can also adjust the starting opacity to 0.4, it seems more smoothy.. – bingjie2680 Jul 31 '12 at 08:08

Charlie Rudenstål · Answer 3 · 2012-07-31T08:32:05.600

This will work and also support adding and removing boxes on the fly (as opposed to the other answers) because of event delegation:

$("#container").on("click", "div", function(e) {
  $("#container div").css("z-index", 0); 
  $(this).css({ "z-index": 10, "opacity": 0.4 })
         .fadeTo(400, 1);
});

Optionally add .not($(this)) to $("#container div") to avoid changing the z-index to 0 for the currently selected box. But because we change it back to 10 on the line after it is not really necessary. Could be useful to avoid bugs if the code gets more complex in the future though.

Try it out here:
http://jsfiddle.net/BWABk/

Fade in selected div and set it on top of the others

3 Answers3