动画方形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>