Snap SVG路徑動畫從頂部不離開

Question

我有一些SVG的，我想動畫懸停，現在我有90％，但是，實際的動畫看起來不太好，我希望它出現幾乎是向上滑動，但目前看起來好像是從左側進出。

我創建這裏小提琴：http://jsfiddle.net/SeriousJelly/qhaqrju5/1

$(function() { 

    //Grab an array of all the main SVG Elements 
    var containers = $(".category .item a"); 

    //Define some vars that we will use later 
    var speed = 1000; 
    var animation = mina.backout; 

    //Loop through all of these containers and insert the SVG's 
    containers.each(function(index) { 

     //Get each of our SVG tags 
     var s = Snap(".animated-overlay.svg-" + index); 

     //Define our Paths 
     var defaultBluePath = "M89.73,22.34c0,0-11.02-2.41-18.56-2.41c-17.36,0-31.17,6.23-53.67,6.23c-9.94,0-17.48-1.19-17.48-1.19V0h89.72V22.34z"; 
     var defaultWhitePath = "M17.5,26.17c-9.94,0-17.48-1.19-17.48-1.19v3.05c0,0,7.55,0.67,17.48,0.67c19.45,0,36.41-7.51,53.77-7.51c10.51,0,18.47,2.01,18.47,2.01v-0.86c0,0-11.02-2.41-18.56-2.41C53.81,19.94,40,26.17,17.5,26.17z"; 

     //Define our Hover Paths 
     var hoverBluePath = "M0.02,0 h89.72 v13.25 h-89.72z"; 
     var hoverWhitePath = "M0,13.2 h89.75 v0.7 h-89.75z"; 

     //Load up the default paths in the SVG 
     var bluePath = s.path(defaultBluePath); 
     var whitePath = s.path(defaultWhitePath); 

     //Define our Default Path Atributes 
     bluePath.attr({ fill: "#16325C" }); 
     whitePath.attr({ fill: "#FFFFFF" }); 

     //Let's group our paths, it doesn't seem like you can animate the whole group though :(
     var paths = s.group(bluePath, whitePath); 

     //Animate on Mouse Enter 
     $(containers[index]).mouseenter(function() { 
      bluePath.animate({ path: hoverBluePath }, speed, animation); 
      whitePath.animate({ path: hoverWhitePath }, speed, animation); 
     }); 

     //Animate on Mouse Leave, return the paths to the default 
     $(containers[index]).mouseleave(function() { 
      bluePath.animate({ path: defaultBluePath }, speed, animation); 
      whitePath.animate({ path: defaultWhitePath }, speed, animation); 
     }); 



    }); 

}); 

這將是巨大的，如果有人可以來看看，並幫助整理的動畫或解釋它是如何工作的？

在此先感謝

Answer 1

更新：使用更好的defaultWhitePath，現在平穩過渡。

 //Define our Paths 
     var defaultBluePath = "M0,0 L0,25 C42,36 50,11 90,23 L90,0"; 
     var defaultWhitePath = "M0,25 C42,36 50,11 90,23 L90,25 C50,11 42,46 0,30Z"; 

     //Define our Hover Paths 
     var hoverBluePath = "M0.02,0 L0,13 L90,13 L90,0 Z"; 
     var hoverWhitePath = "M0,13 L90,13"; 

上述更改在FF上進行測試。