2

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.

MoonWanderer
  • 23
  • 4
  • Can you be more clear on what is the expected output that you are trying to achieve? – Techie Apr 27 '16 at 16:50
  • @Nimesh mouse over the left container and you will see the effect i pretend in the other ones. – MoonWanderer Apr 27 '16 at 16:54
  • @MoonWanderer what you want in this effect? – Infem 401 CedupHH Apr 27 '16 at 17:07
  • I see that the code for animate i.e. after `//animação posição` is missing from the hover functions for the other center and right images – Techie Apr 27 '16 at 19:15
  • @Nimesh i just need the containers to move behind the others. The hover will chain and event that will move 2 images behind the hover element. the website needs to be responsive. I tried to make this by setting the containers positions, but it wouldnt work because the images collapse in each other and when i "hover out" the elements cant back to their original positions, like they were. Simply: just need to put containers behind containers when i mouse over, and when i "mouse out" i need to reset the positions. – MoonWanderer Apr 27 '16 at 19:48
  • @Infem401CedupHH Look at my codepen, click in the left image. I pretend the same effect in the 3 images. – MoonWanderer Apr 27 '16 at 22:41
  • moon can you share the codepen link – Karthikeyan sundaramoorthi Apr 28 '16 at 09:02
  • @Karthikeyansundaramoorthi https://codepen.io/marcof/pen/GZYRoy – MoonWanderer Apr 28 '16 at 18:52

2 Answers2

0

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.

Alan Wagner
  • 2,230
  • 1
  • 16
  • 13
0

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');
});

});

Karthikeyan sundaramoorthi
  • 554
  • 1
  • 11
  • 24
  • you animation moves the images 33%, 66% and changes z-index. i had try that effect althought didn't much of it. i will redo my code again. Thank you for the help. nice to know about 'xx' to get the previous values of position. You answer will be marked as correct althought didn't work "like a charm". – MoonWanderer Apr 29 '16 at 17:14