ウェブサイトのアニメーションを非表示にする

Question

私が作成しているウェブサイトでアニメーションを行う必要があります。 私は3つの画像を持っており、私はそれらのうちの2つがメインのものの背後に隠れるようにする必要があります（誰がその上にマウスを持っています）。
すべてのイメージコンテナで動作する必要があります。 jQuery関数を作成しようとしましたが、残りを見つけることができません。 広範囲にわたる検索で解決策が見つかりませんでしたが、それらを一緒に入手できませんでした。

迅速な回答に感謝します。

はここソリューションの「一部」と私のcodepenです： https://codepen.io/marcof/pen/GZYRoy - 左のコンテナの上にマウスとあなたは私が他のものにふり効果が表示されます。中央にあるマウスの上にマウスを置くと、その背後に左右が隠れるはずです。

$("#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'); 
} 
); }); 

ここでそれを投稿するにはあまりにも多くのコードを、codepenバージョンをビストしてください。

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

あなたはz-indexのCSS属性を試しましたか？

JQueryアニメーションを使用すると、アニメーションが終了したらコールバック関数を実行できます。だから、

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

あなたはZインデックスの値を持つ要素を初期化することができます。たとえば10、あなたはこれを1に設定すると、その後、この要素は他の人の後ろに移動します。