在網站上隱藏動畫

我需要在我創建的網站上進行動畫製作。我有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版本。

來源

2016-04-27 MoonWanderer

你可以更清楚你試圖達到什麼樣的預期輸出？ – Spidey

@Nimesh鼠標在左邊的容器上，你會看到我假裝在其他的效果。 – MoonWanderer

@MoonWanderer你想要什麼效果？ –

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

}）;

來源

2016-04-29 06:05:34

你的動畫將圖像移動33％，66％和改變z-index。儘管沒有太多，但我嘗試了這種效果。我會再次重做我的代碼。感謝您的幫助。很高興知道'xx'以獲得以前的位置值。你的回答將被標記爲正確，儘管沒有「像魅力」。 – MoonWanderer

您是否試過z-index css屬性？

使用JQuery Animate，您可以在動畫完成後執行回調函數。所以

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

可以初始化用z-index值的元素：10例如，那麼當你將它設置爲1，該元素將走在別人的後面。

來源

2016-04-28 09:11:16

在網站上隱藏動畫

回答

相關問題