jquery的紅框動畫

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

下面是jsFiddle的示例。

來源

2016-09-22 Bharat Negi

你不需要使用任何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

來源

2016-09-22 09:23:36

是的，這是確定的，但我的問題是當任何一個在大盒子那麼這個紅盒子裏面是有生命的。 –

jquery的紅框動畫

回答

相關問題