jqueryを持つ赤いボックスのアニメーション

Question

この赤いボックスをjQueryでスムーズにアニメーション化することはできますか？

$(document).ready(function() { 
    $(".trapezoid-two").hover(function() { 
     $(this).find('path').attr('d','M0,0 L100,0 L100,100 L0,100z'); 
    }, function() { 
     $(this).find('path').attr('d','M0,0 L100,23 L100,80 L0,100z'); 
    }); 
}); 

jsFiddleの例を示します。

Answer 1

これにはJSコードを使用する必要はありません。 2つの<animate>タグを使用できます.1つはmouseenter、もう1つはmouseleaveです。これを試してみてください：

<path d="M0,0 L100,23 L100,77 L0,100z" fill="red"> 
    <animate begin="mouseenter" attributeName="d" attributeType="XML" to="M0,0 L100,0 L100,100 L0,100z" dur="0.2s" fill="freeze" /> 
    <animate begin="mouseleave" attributeName="d" attributeType="XML" to="M0,0 L100,23 L100,77 L0,100z" dur="0.2s" fill="freeze" /> 
</path> 

Updated fiddle