在网站上隐藏动画

Question

我需要在我正在创建的网站上制作动画。 我有 3 张图片，我需要其中 2 张隐藏在一张主要图片后面（谁是鼠标悬停在上面的图片）。
它必须适用于所有图像容器。 我试图编写一个 jQuery 函数来做到这一点，但我找不到其余的。 尽管我找到了解决方案的一部分，但广泛的搜索并没有帮助，但我无法将它们放在一起。

希望您能快速回答。

这是我的代码笔，其中包含解决方案的“部分”： 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 Animate，您可以在动画完成后执行回调函数。所以

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

您可以使用 z-index:10 的值初始化元素，例如，当您将其设置为 1 时，该元素将落后于其他元素。