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代码;您可以使用两个<animate>标记，一个用于mouseenter，另一个用于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

带有jquery的红色框的动画

1 个答案: