Javascript 带有jquery的红盒动画

任何人都可以使用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');
    });
});

---

这里是中的一个示例。

您不需要为此使用任何JS代码；您可以使用两个

您不需要为此使用任何JS代码；您可以使用两个
是的，这是可以的，但是我的问题是当大盒子上的任何一个然后在这个红色盒子内时是动画。是的，这是可以的，但是我的问题是当大盒子上的任何一个然后在这个红色盒子内时是动画。
<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>