Javascript 将方形div设置为梯形的动画

正如标题所述，我正在尝试使用jquery.animate（）将一个正方形div动画化为梯形。然而，我得到的唯一动画是宽度调整，我不太清楚为什么会发生这种情况

$（函数（）{
$（'.square'）。悬停（函数（）{
$（此）。设置动画({
右边框：“100px实心红色”，
borderTop:'50px实心透明'，
borderBottom:'50px实心透明'，
高度：“100px”，
宽度：“0”
});
});
});
div.square{
高度：100px；
宽度：100px；
背景色：红色；
}
左分区{
右边框：100px实心红色；
边框顶部：50px实心透明；
边框底部：50px实心透明；
高度：100px；
宽度：0；
}
我会使用类和css转换：


$（函数（）{
$（'.square'）。悬停（函数（）{
$（this）.removeClass（'square'）.addClass（'left'）；
});
});
div.square{
高度：100px；
宽度：100px；
背景色：红色；
}
左分区{
右边框：100px实心红色；
边框顶部：50px实心透明；
边框底部：50px实心透明；
高度：100px；
宽度：0；
-webkit过渡：所有500毫秒的缓速；
-moz转换：所有500毫秒都放松；
-o型过渡：所有500ms的放松；
过渡：所有500ms都放松；
}

我相信问题出在
边框：透明
动画中。如果我没有弄错的话，添加jQuery UI插件应该可以解决这个问题。运行好代码片段，除了同时显示正方形和梯形外，什么都不做，几秒钟后正方形向左滑动并消失。我认为@Artanis是对的：from:
所有动画属性都应该设置为单个数值，除非下文另有说明；大多数非数字属性无法使用基本jQuery功能设置动画。
和同上。
注意：jQuery UI项目通过允许一些非数字样式（如颜色）设置动画来扩展.animate（）方法。