在网站上隐藏动画

Question

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

希望得到快速答复。

这是我的代码笔 "part" 的解决方案： 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');
}
); });

这里代码太多post，请访问codepen版本。

Answer 1

您是否尝试过 z-index css 属性？

使用 JQuery Animate，您可以在动画完成后执行回调函数。所以

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

你可以初始化元素，例如z-index:10，当你设置为1时，这个元素会排在其他元素后面。

Answer 2

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

});

在网站上隐藏动画

Hide animation on website

html

css

jquery

jquery-effects

jquery-animate