Hide animation on website

Question

I need to do an animation on a website i am creating. I have 3 images and i need 2 of them to hide behind a main one (who is the one that has the mouse over it).
It must work with all the image containers. I have tried to write a jQuery function to do it but i can't find the rest. Extensive search didn't help althought i found pieces of the solution but i couldn't get them together.

Would appreciate a quick answer.

Here's my codepen with "part" of the solution: https://codepen.io/marcof/pen/GZYRoy - mouse over the left container and you will see the effect i pretend in the other ones. When i mouse over the middle one the left and right should hide behind it and so on.

$("#equipamentosdesportivos").hover(function(){

$("#caixa-equipamentosdesportivos").css('height','100%');
$("#descricao-equipamentosdesportivos").css('display','flex');
$("#caixa-equipamentosdesportivos div").addClass('informacao-posicao');

// animação posição
$("#parquesinfantis").animate({right: "80%"}, 600);
$("#mobiliariourbano").animate({right: "80%"}, 600);
},
                   function(){
$("#caixa-equipamentosdesportivos").css('height','15.5%');
$("#descricao-equipamentosdesportivos").css('display','none');
$("#caixa-equipamentosdesportivos div").removeClass('informacao-posicao');
}
); });

Too much code to post it here, please vist the codepen version.

Answer 1

HTML:

           <a onlick=""><div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 caixaimagem no-padding"  id="div1"> <img src="http://musicaecinema.com/wp-content/uploads/2013/12/Leprosy.jpg" class="imagem img-responsive"><div class="caixa-informacao" id="caixa-div1"><div><span class="titulo">TOP SECRET</span><span class="descricao" id="descricao-div1"> sdfsdfsdf </span></div></div></div></a>

            <a onclick=""><div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 caixaimagem no-padding" id="div2"><img src="http://musicaecinema.com/wp-content/uploads/2013/12/Leprosy.jpg" class="imagem img-responsive"><div class="caixa-informacao" id="caixa-mobiliariourbano"><div><span class="titulo">TOP SECRET</span><span class="descricao" id="descricao-mobiliariourbano"><br>BLA BLA.<br><br>SOMETHING HERE</span></div></div></div></a>

            <a onclick=""><div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 caixaimagem no-padding" id="div3"><img src="http://musicaecinema.com/wp-content/uploads/2013/12/Leprosy.jpg" class="imagem img-responsive"><div class="caixa-informacao" id="caixa-parquesinfantis"><div><span class="titulo">TOP SECRET</span><span class="descricao" id="descricao-parquesinfantis"> asdasasasd </span></div></div></div></a>
        </div>

JS:

$(function(){
    $("#div1").hover(function(){

    $("#caixa-div1").css('height','100%');
    $("#descricao-div1").css('display','flex');
    $("#caixa-div1 div").addClass('informacao-posicao');


    $("#div1").css({"z-index": "2"});
    $("#div2").css({"z-index": "1"});
    $("#div3").css({"z-index": "0"}); 

    $("#div2").animate({right: "33%"}, 600);
    $("#div3").animate({right: "66%"}, 600);


},function(){
    $("#div2").animate({right: "xx"}, 600);
    $("#div3").animate({right: "xx"}, 600);
    $("#div3").removeAttr("style");
    $("#div2").removeAttr("style");
    $("#caixa-div1").css('height','15.5%');
    $("#descricao-div1").css('display','none');
    $("#caixa-div1 div").removeClass('informacao-posicao');
}); 

$("#div2").hover(function(){

    $("#caixa-div2").css('height','100%');
    $("#descricao-div2").css('display','flex');
    $("#caixa-div2 div").addClass('informacao-posicao');


    $("#div1").css({"z-index": "1"});
    $("#div2").css({"z-index": "2"});
    $("#div3").css({"z-index": "0"}); 


    $("#div1").animate({left: "33%"}, 600);
    $("#div3").animate({right: "33%"}, 600);


},function(){
    $("#div1").animate({left: "xx"}, 600);
    $("#div3").animate({right: "xx"}, 600);
    $("#div3").removeAttr("style");
    $("#div1").removeAttr("style");
    $("#caixa-div2").css('height','15.5%');
    $("#descricao-div2").css('display','none');
    $("#caixa-div2 div").removeClass('informacao-posicao');
});

$("#div3").hover(function(){

    $("#caixa-div3").css('height','100%');
    $("#descricao-div3").css('display','flex');
    $("#caixa-div3 div").addClass('informacao-posicao');

    $("#div1").css({"z-index": "0"});
    $("#div2").css({"z-index": "1"});
    $("#div3").css({"z-index": "2"});  


    $("#div1").animate({left: "66%"}, 600);
    $("#div2").animate({left: "33%"}, 600);


},function(){
    $("#div1").animate({left: "xx"}, 600);
    $("#div2").animate({left: "xx"}, 600);
    $("#div2").removeAttr("style");
    $("#div1").removeAttr("style");
    $("#caixa-div3").css('height','15.5%');
    $("#descricao-div3").css('display','none');
    $("#caixa-div3 div").removeClass('informacao-posicao');
}); 

});

Answer 2

Have you tried you the z-index css attribute?

With JQuery Animate you can execute a callback function once the animation is finished. So

$("#parquesinfantis").animate({right: "80%"}, 600, function(){
    $(this).css("z-index", 1);
});

You can initialize the elements with a value of z-index:10 for example, then when you set it to 1, this element will go behind the others.