Question

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

欣赏快速回答。

这是我的代码与＆＃34; part＆＃34;解决方案： 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

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

}）;

在网站上隐藏动画

2 个答案: