動畫方形div成梯形

Question

正如標題所述，我試圖使用jquery .animate（）將方形div動畫為梯形。 但是，我得到的唯一動畫是寬度調整，我不太清楚為什么會出現這種情況。

 $(function () { $('.square').hover(function () { $(this).animate({ borderRight: '100px solid red', borderTop: '50px solid transparent', borderBottom: '50px solid transparent', height: '100px', width: '0' }); }); }); 

 div.square { height: 100px; width: 100px; background-color: red; } div.left { border-right: 100px solid red; border-top: 50px solid transparent; border-bottom: 50px solid transparent; height: 100px; width: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="square"></div> <div class="left"></div> 

Answer 1

我會使用類和css轉換：

 $(function () { $('.square').hover(function () { $(this).removeClass('square').addClass('left'); }); }); 

 div.square { height: 100px; width: 100px; background-color: red; } div.left { border-right: 100px solid red; border-top: 50px solid transparent; border-bottom: 50px solid transparent; height: 100px; width: 0; -webkit-transition: all 500ms ease-out; -moz-transition: all 500ms ease-out; -o-transition: all 500ms ease-out; transition: all 500ms ease-out; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="square"></div>