動畫jQuery狀態不能保存

我想動畫一個div來保存圖像來摺疊並顯示它下面的div。我有頂部div與較高的Z指數降低其高度，以揭示什麼是與一個較低的Z指數與jQuery動畫函數與懸停。但是，動畫不成立，並在完成後立即恢復。任何人都可以幫助找到解決方案，使其保持動畫狀態，而光標仍懸停在盒子上？動畫jQuery狀態不能保存

$(document).ready(function() { 
    $('.artist').hover(function() { 
     $('.container',this).animate({'height':'9.1vw'}, 'fast'); 
    }); 


});

Here is the JSFiddle

來源

2014-02-12 wmlk

好吧，這沒有幫助 –

下面是更新後的代碼。您正在製作.container動畫，而不是.artistimage。

$(document).ready(function() { 
    $('.artist').on("mouseenter", function() { 
     $('.artistimage',this).animate({'height':'9.1vw'}, 'fast'); 
    }).on("mouseleave",function(){ 
      $('.artistimage',this).animate({'height':'11.5vw'}, 'fast'); 
    }); 
});

這裏的jsfiddel：http://jsfiddle.net/LCPJc/3/

來源

2014-02-12 16:00:26 antkim003

美女。我沒有想到動畫會產生變化。謝謝一堆。 – wmlk

此外，你會知道一種方式讓圖像保持原樣並修剪底部？現在改變身高會導致整個事情上升。 – wmlk

如果你爲你的html（.container div中的.artistimage）設置jsfiddle，並將.container div的高度設置爲11.5vw，它應該可以工作。 jsfiddle設置似乎很好。 – antkim003

問題是.container內的圖像。它只是在動畫完成後調整大小。

您可以通過多種方式解決此問題。您可以在容器上設置overflow:hidden;，您可以選擇同時調整圖像大小或同時調整大小。這取決於你想要的最終結果。調整圖像大小可以改變圖像的寬高比並破壞照片，例如，如果您想避免這種情況，可以使用overflow: hidden;選項。

除此之外，我建議將動畫改變CSS，像這樣：

.container{ 
    overflow: hidden; 
    transition: height 0.15s; 
} 

div.artist:hover .container{ 
    height: 9.1vw; 
}

這裏的jsfiddle。

來源

2014-02-12 16:15:20 Narayon

動畫jQuery狀態不能保存

回答

相關問題